用于定位动态类的Sass函数

Question

我遇到了一个针对sass中的类的问题，这个问题在所有元素中几乎都是相同的，但只是更改了最后一部分，我不知道该怎么做。

该课程基于以下用户ID：

<div class"user_143"></div>
<div class"user_341"></div>
............

我想为所有以10 + 1或+2等倍数结尾的类创建样式。

例如，1中的所有类和1中的所有类都获得backgound-color 2中的所有类获得不同的backgound-color

这有可能实现吗？

Answer 1

一种可能的解决方案是使用属性选择器，在下面的例子中，它以一个以user开头并以数字结尾的类的所有元素为目标

如果只有user类以数字结尾，请删除第一个选择器[class^="user"]

div[class^="user"][class$="1"] {
  color: red;
}
div[class^="user"][class$="3"] {
  color: blue;
}

<div class="user_143">Number 3</div>
<div class="user_341">Number 1</div>