html - 我能否以编程方式确定一系列 CSS 类的属性值？

Question

我需要帮助来理解更简单的编写方法。

我的类(class)末尾有 1-100 之间的数字。例如:

.select1 {
    padding: 1em;
}

.select2 {
    padding: 2em;
}

.select3 {
    padding: 3em;
}

等等

我想将数字与我想要添加的数量相匹配，但不知道如何在 CSS 中实现它。有没有一种更面向对象的方式在 CSS 中执行此操作，而不是实际将它们写出来？

Answer 1

您可以使用像 SASS 这样的 CSS 预处理器或 LESS , 有变量。

例如，使用 SASS 你可以做一个 for 循环:

$class-slug: select !default

@for $i from 1 through 100
  .#{$class-slug}-#{$i}
    padding: $i + 0em

这将输出您要查找的内容。

这不是纯 CSS 解决方案，但胜过手动完成每一个。否则，您也可以使用 Javascript 执行此操作，但这并不理想。