Question

这既是一个问题，也是一个声明。

问题是：DYNAMIC CSS有这样的东西吗？换句话说 - 你能做到这一点：

<span class="size(24pt)">This is a test</span>

并且让CSS认识到24pt是传递给CSS的参数吗？ CSS将是：

<style>
.size { font-size: #1; }
</style>

或者

<style>
.size { font-size: $1; }
</style>

声明：如果不能这样做 - 为什么不呢？静态CSS排除了CSS的目的。 CSS，如HTML和Javascript，应该是动态的并接受参数。如果CSS接受了参数，那么你就不需要这样做了：

<style>
.size9 { font-size: 9pt; }
.size10 { font-size: 10pt; }
...and so forth
</style>

我仍然对那些设计这些东西的人的短视感到惊讶。这就像比尔盖茨说我们永远不会需要超过640K或史蒂夫乔布斯说我们不需要颜色。能够将参数传递给CSS的必要性对于减少和消除CSS中的冗余至关重要。

对不起 - 有点咆哮 - 但我已经找了几个月做动态CSS的方法，但没有找到任何办法。那么有办法吗？

注意：怎么做？每个CSS元素都被视为一个函数。（它刚刚就已经存在了。）因此所有CSS元素都会接受一个参数列表。（即：A {bold;}可以成为A {$ 1;}并且class =“a（粗体）”的类声明将生成A {bold;}。这对某些人来说可能显得愚蠢 - 但真正的想法在你可以让A {*}表示“A {-anything-}”。那么

<style>
.size { font-size: *; }
.td{ text-decorations: *; }
A{*}
</style>

当发送class =“a（粗体大小（14pt）td（无））”时会生成A {bold;字体大小：14pt;文本装饰：无;}

这不是很整洁吗？ :-) CSS中有这样的事情吗？

Answer 1

不，不是CSS。

但你可以在SCSS中。它是一种丰富的（呃）语言，可以让你做这些事情。但是浏览器并不直接支持这一点。 SCSS已编译成“＃”;进入CSS，所以你不会获得你描述的完全灵活性。

请参阅：http://sass-lang.com/guide

还有其他品种。 SCSS基于SASS，但我认为SCSS是首选，因为它的语法更接近CSS，实际上你可以从纯CSS文件开始，并随时添加更智能的添加。

另一个流行的版本是LESS。我过去曾尝试过这种方法，但我认为它不如SCSS灵活且不那么直观，因此我转换了。我没有其他人的实践经验。

无论您选择哪种方式，您都需要将其编译为纯CSS，以便浏览器了解正在发生的事情。

Answer 2

如果您要在问题中添加javascript或jquery标记，我可能会想出这种方法：

$(function(){
  
  $('[data-class^="size"]').each(function(){
    var dynamicClass = $(this).data('class');
    var regExp = /\(([^)]+)\)/;
    var matches = regExp.exec( dynamicClass );
    
    $(this).css('font-size', matches[1]);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-class="size(24pt)">This is a test</span>

是否有动态CSS这样的东西？

2 个答案: