我可以以编程方式确定一系列CSS类的属性值吗？

Question

我需要帮助了解更简单的方法来写这个。

我的课程结尾有1-100之间的数字。例如：

.select1 {
    padding: 1em;
}

.select2 {
    padding: 2em;
}

.select3 {
    padding: 3em;
}

等

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

Answer 1

您可以使用带有变量的SASS或LESS等CSS扩展语言。

例如，使用SASS，您可以执行for循环：

$class-slug: select !default

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

哪会输出你要找的东西。

这不是一个纯粹的CSS解决方案，但它可以手动完成每个解决方案。否则你也可以用Javascript做到这一点，但这并不理想。

Answer 2

你不能用CSS做到这一点。你不应该这样做。它与内联样式相同：

<div style="padding: 1em"></div>
<div style="padding: 2em"></div>
<div style="padding: 3em"></div>
...

糟糕的方式。您应该将HTML布局和CSS分开。