有什么方法可以在css中创建动态实用程序类吗

Question

有什么方法可以做这样的事情吗。。。<h1 class="pad-5">Some Heading</h1>以将5px的填充应用于CCD_ 2标签。这应该是动态的。例如，如果我写class="pad-15"，它应该提供15px的填充。

我想通过创建一个单独的规则集来实现这一点。不是通过单独定义不同类别的焊盘-5、焊盘-15等等。

在css文件中，它应该是类似。。。

.pad-[$value]{
padding: $value;
}

那么，有什么方法可以做到这一点吗？

Answer 1

不，你不能用CSS来做这件事。如果需要的话，可以使用诸如SASS或Less之类的CSS预处理器在循环中为您生成一堆类。您也可以使用JS来添加基于类名的样式，尽管我绝对不建议这样做

SASS(SCSS(示例：

@for $i from 1 through 15 {
.pad-#{$i} {
padding: $i;
}
}

Answer 2

使用mixin(带Sass(：

https://sass-lang.com/documentation/at-rules/mixin

示例：

@mixin pad($width) {
padding: #{$width}px;
}

应用：

h1{
@include pad(5);
}