Question

是否有任何技术允许在css3语句中使用表达式？

经常执行width: 35%+20px或类似的操作会很有帮助。现在我对这些情况的唯一解决方案是重新设计页面或使用javascript动态设置css。

Answer 1

关于值和单位的CSS工作草案指定了calc函数，尽管在最新版本的IE和Firefox中它只有supported。

Answer 2

不幸的是CSS3 calc()尚未准备就绪;）

引用规范：

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}

p:hover { border-color: yellow; }

虽然可能在CSS中允许使用评估表达式（它不是编程语言），但令人兴奋的是，可能会使用“外卖”这样简单的东西......但是再次出现了“box-sizing “财产，所以也许没有必要 - 否则可能会失去 KISS 原则？

Answer 3

只要允许长度值，就可以使用calc（）函数。这在CSS3值和单位中定义（参见http://www.w3.org/TR/css3-values/）。我不知道是什么浏览器支持它。

section {
   float: left;
   margin: 1em; border: solid 1px;
   width: calc(100%/3 - 2*1em - 2*1px);
}

p {
   margin: calc(1rem - 2px) calc(1rem - 1px);
   border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

Answer 4

dicejs.com（据称代表动态注入的css引擎）SASS的客户端版本。非常光滑，允许实时操作变量和函数。插件是颜色和CSS3的基础，但你可以轻松编写自己的插件，因为它都是在javascript中。我认为这是一种很好的方式来等待主要浏览器支持CSS规范。

Answer 5

是的，它被称为Sass。

http://sass-lang.com/

Css3可评估的表达式？

5 个答案: