有没有办法在css中创建动态实用程序类？

Question

有没有办法做一些像这样的事情...对h1标记应用5px填充的<h1 class="pad-5">Some Heading</h1>。这应该是动态的。例如，如果我编写class="pad-15"，它应该提供15px的填充。

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

在css文件中，它应该类似于...

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

那么，有没有办法做到这一点呢？

Answer 1

不，您不能使用CSS执行此操作。如果需要，您可以使用CSS预处理器，如SASS或Less，在循环中为您生成一堆类。您也可以选择使用JS来添加基于类名的样式，尽管我绝对不推荐这样做。

SASS (SCSS)示例：

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

Answer 2

使用混合(与Sass)：

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

示例：

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

应用程序：

h1{
  @include pad(5);
}