在 Less\Sass\JQuery 中带有来自 HTML 的参数的 CSS 类？ [关闭]答案

【问题标题】：CSS Class with Argument from HTML in Less\Sass\JQuery? [closed]在 Less\Sass\JQuery 中带有来自 HTML 的参数的 CSS 类？ [关闭]
【发布时间】：2015-07-30 22:05:50
【问题描述】：

我有类似的东西：

<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 的）循环。

【问题讨论】：

所有人都可以做到这一点，所以你需要的方法完全取决于你为什么需要它。

标签： jquery css sass less

【解决方案1】：

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

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

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

不清楚您到底想达到什么目的，所以我无法评论您的 HTML 标记。需要注意的是，LESS 和 Sass 都可以用于迭代。例如，要在 LESS 中声明不同的类名，您可以递归调用 mixin：

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

.generate-classes(100);

上面的sn-p输出：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：