CSS Class 的参数来自 HTML 在 Less\Sass\JQuery 中？

Question

我有这样的东西：

<div class='myclass'>
    <span class='myclass-value-1' value='1'>1%</span>
    <span class='myclass-value-2' value='2'>2%</span>
    ...
    <span class='myclass-value-99' value='99'>99%</span>
    <span class='myclass-value-100' value='100'>100%</span>
</div>

我想为 myclass 中的每个元素创建 100 种不同的样式（例如，不同的颜色阴影或不同的宽度 - 可以通过 HTML 标签的值计算）。哪种方式最好？我应该在 JQuery 中使用一些循环，还是只有 Less/Sass 可以这样做？在这种情况下 - 我不想使用服务器端模板的（例如 Twig 的）循环。

Answer 1

您可以使用 :nth-child(n) 选择器在您的样式表中实现这一点。

供参考：http://nthmaster.com/

Answer 2

如果您想根据元素的 attributes/properties 设置样式，则必须使用 jQuery(JavaScript)。 CSS 不能使用属性来设置元素的样式。 CSS有attr功能，但目前只能用于设置content 属性.

使用 jQuery 为元素设置样式，您可以使用 css 方法：

$('span[myclass^=myclass]').css('width', function() {
   return $(this).attr('value') + 'px';
});

不清楚您到底想达到什么目的，因此我无法对您的 HTML 标记发表评论。需要注意的是LESS和Sass都可以用于迭代。例如，为了在 LESS 中声明不同的 class 名称，你可以递归调用一个 mixin：

generate-classes(@n, @i: 1) when (@i =< @n) {
  .myclass-value-@{i} {
    property: (@i);
  }
  .generate-classes(@n, (@i + 1));
}

.generate-classes(100);

上面的代码片段输出：

.myclass-value-1 {
  property: 1;
}
.myclass-value-2 {
  property: 2;
}
...
.myclass-value-100 {
  property: 100;
}

CSS Class 的参数来自 HTML 在 Less\Sass\JQuery 中？

CSS Class with Argument from HTML in Less\Sass\JQuery?

css

jquery

sass

less