从元素属性动态创建css规则

Question

虽然没有SASS / LESS文档，但找不到我要找的任何内容。我正在开发一个AngularJS应用程序，它具有大量动态的预定义样式（想想CMS）。

CSS3 / LESS / SASS / Anything是否可以从元素属性动态创建CSS规则 - 在浏览器中？

我知道我可以做内联造型，但我对它不太满意 - 必须有更好的方法！

来自以下HTML

<div id="el" animation-time="3"></div>

创建以下css：
#el { transition: 3s linear all; }

我已经看到了以下用法的一些示例，所以我的希望很高：

#container {
   min-width: 600px;
   width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

Answer 1

您可以创建如下列表：

*[font-size="0pt"] {font-size:0pt}
*[font-size="1pt"] {font-size:1pt}
*[font-size="2pt"] {font-size:2pt} ...

Autor对评论的说明：

• +100永远不会被使用 - 感觉很浪费。

Answer 2

您必须识别HTMLNode。所以这可行：

<div id="foobar" animation-time="3s"></div> 

用

 div#foobar{
   transition-duration: expression(foobar.getAttribute('animation-time'));
 }