来自类名的 CSS 属性值

Question

是否可以在类名中为 CSS 传递参数？例如:

.mrg-t-X {
   margin-top: Xpx;
}

<span class="mrg-t-10">Test</span>

在此示例中，X 应为 10。

Answer 1

不，不是。我们最接近的是 attr() function ，但这仅适用于 content 属性:

figure::before {
  content: attr(data-before) ', ';
}

figure::after {
  content: attr(data-after) '!';
}

<figure data-before="Hello" data-after="world"></figure>

也许有一天它会被扩展，以便我们可以在其他地方使用它，但目前这是不可能的。

目前，我相信您知道，如果您希望能够使用 .mrg-t-X 类，您需要为每个 X 定义单独的样式规则 您希望允许:

.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...