无论如何通过带变量的html类来设置html元素的样式？

Question

我只是想知道是否可以根据班级的名称来设置具体的样式。

例如，Bootstrap 4有一个用于边距和填充的辅助类，如：

<div class="m-t-1 p-a-0"></div>

这使得边缘的div 1em位于顶部，并从所有边移除填充。

我确信他们已经在CSS中预先设置了这个类来实现这一目标。 但我很好奇是否有办法将该类用作变量。

例如：

<div class="fs-x"></div>

其中x可以是任何数字，然后此类会将样式font-size: x赋予div。

这可能吗？

感谢。

Answer 1

您可以使用CSS预处理器（如SASS或LESS）来实现此目的，但是它在下面指定范围内生成静态类是来自SASS documentation的示例：

/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/

哪个会发出此CSS：

$class-slug: for !default

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

Answer 2

必须明确定义所有CSS类。因此，如果X需要存在于.css文件中的每个变体

Answer 3

你可以在css中使用常量，例如

$x = 10px;

img{
   margin-bottom : $x;
}

但是你可以用这种方式声明变量

:root {
  --color-principal: #06c;
}

#foo h1 {
  color: var(--color-principal);
}