是否可以创建具有动态值的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

您可以使用此选择器定位这些元素 - [class^="mystyle-"]，但使用纯CSS无法实现其余元素。

Answer 2

正如@ 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;
}