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

2023年7月25日 160次阅读

假设我有一些像这样的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类设置的值替换*？

提前致谢！

最佳答案 正如@ 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;
}
点赞