是否可以在CSS中进行数学运算？

Question

我有jquery accorion id #accordion和头类名称中的一些内容.simpleColor.现在我想给.simpleColor一个计算余量.在伪...它看起来像这样,

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

如果有可能,我愿意使用任何其他技术(如javascript)来实现此目的.

Answer 1

有一个名为calc的CSS函数开始得到很好的支持.语法如下:

width: calc(50% - 100px);

(注意运算符周围的空格很重要)

这允许CSS中的真正动态计算支持.使用预处理器,您只能将静态长度与静态长度相结合,相对长度与相对长度相结合.

从Chrome 19,Firefox 4和IE9开始支持Calc.这个功能得不到广泛的支持,足以广泛使用它,但它将来不会太远,它是值得记住和期待的东西.

您可能还想查看[`box-sizing:border-box;`](http://www.paulirish.com/2012/box-sizing-border-box-ftw/).这使填充从宽度中减去而不是添加它,并且它具有比calc更好的支持,回到IE8,并且具有[可用于IE6/7的polyfill](https://github.com/Schepp/box-sizing- polyfill)如果需要支持.IE8仍有相当大的市场份额,所以我建议使用`box-sizing'来满足您的需求. (3认同)

Answer 2

本身不可能在CSS内部进行数学运算.您可以使用JavaScript在页面加载时更改CSS属性,但这很麻烦,必须在每个页面加载时使页面变慢.

您需要使用像LESS,Stylus或SASS这样的CSS预处理器.

使用这些语言之一的好处是可以从中生成实际的CSS样式表.您还可以获得诸如函数,混合函数,变量等优点.