是否可以创建一个具有动态值的 css 类？

Question

假设我有一些像这样的 div 元素：

<div class="mystyle-10">Padding 10px</div>

<div class="mystyle-20">Padding 20px</div>

<div class="mystyle-30">Padding 30px</div>

是否可以创建一个类或类似的东西：

.mystyle-*{padding: *px; margin-left: *px; border: *px solid red; }

这将用我们为 div 的类设置的值替换 *？

提前致谢！

Answer 1

正如 @bjb568 所说，您可以使用 css 预处理器（Sass、Less、Stylus 等）轻松实现这一点

下面是Sass示例

@for $i from 1 through 5 {
    .mystyle-#{ $i * 10 } {
        $result: ( $i * 10 ) + 0px;
        padding: $result;
        margin-left: $result;
        border: $result solid red;
    }
}

这将输出以下内容：

.mystyle-10 {
    padding: 10px;
    margin-left: 10px;
    border: 10px solid red;
}

.mystyle-20 {
    padding: 20px;
    margin-left: 20px;
    border: 20px solid red;
}

.mystyle-30 {
    padding: 30px;
    margin-left: 30px;
    border: 30px solid red;
}

.mystyle-40 {
    padding: 40px;
    margin-left: 40px;
    border: 40px solid red;
}

.mystyle-50 {
    padding: 50px;
    margin-left: 50px;
    border: 50px solid red;
}