我可以通过编程方式确定一系列CSS类的属性值吗？ [英] Can I programmatically determine a property value for a series of CSS classes?

问题描述

我需要帮助了解一个更简单的写法。

I need help understanding an easier way to write this.

我有一个数字在1-100之间的类。例如：

I have classes that have a number between 1-100 at the end of it. So for example:

.select1 {
    padding: 1em;
}

.select2 {
    padding: 2em;
}

.select3 {
    padding: 3em;
}

等。

我想要匹配的数字与我想添加的数量，但不知道如何去在CSS中。

I want to match the number with the amount I want to add, but have no idea how to go about it in CSS. Instead of actually writing them out is there a more object oriented way of doing this in CSS?

推荐答案

你可以使用这种方法使用CSS扩展语言（如 SASS 或 LESS ，带有变量。

You could use a CSS extension language like SASS or LESS, with variables.

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

For example, with SASS you could do a for loop:

$class-slug: select !default

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

're寻找。

这不是一个纯CSS解决方案，但它打败每个人手。否则你也可以用Javascript做，但这不是理想。

It's not a pure CSS solution, but it beats doing each one by hand. Otherwise you could also do this with Javascript, but that's not ideal.

这篇关于我可以通过编程方式确定一系列CSS类的属性值吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！