类名的CSS属性值

Question

可以在类名中传递CSS的参数吗？例如:

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

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

在这个例子中,X应该是10.

Answer 1

不,不是.我们最接近的是attr()函数,但只能在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 { ... }
...

Answer 2

现在，您可以在样式属性中使用CSS 变量，而不是生成特定的类：

自定义属性（有时称为 CSS 变量或级联变量）是由 CSS 作者定义的实体，其中包含要在整个文档中重复使用的特定值。它们使用自定义属性符号（例如， ）进行设置，并使用函数（例如， ）--main-color: black;进行访问。var()color: var(--main-color);

复杂的网站有大量的 CSS，通常有很多重复的值。例如，相同的颜色可能用在数百个不同的地方，如果需要更改该颜色，则需要全局搜索和替换。自定义属性允许将值存储在一个位置，然后在多个其他位置引用。另一个好处是语义标识符。例如，--main-text-color比 更容易理解#00ff00，特别是如果在其他上下文中也使用相同的颜色。

自定义属性受级联影响并从其父级继承其值。

例子

  span {
  display: block;
  margin-top: var(--m-t);
}

html {
  background: repeating-linear-gradient(to bottom, transparent, 10px, lightgrey 10px, lightgrey 20px);} /* see 10px steps  */

<span style="--m-t:50px">one</span>
<span style="--m-t:85px">two</span>
<span style="--m-t:110px;">three</span>