html - 将值从 HTML 传递到 CSS

Question

我很感兴趣是否可以将值从 html 传递给 css 类？像这样示例:

<div class="mt(5)"> Some text </div>
style {
 .mt(@mpx) {
   margin-top: @mpx px;
 }
}

听说在 Less 中可以实现这种方式

Answer 1

不，您想要的方式在 CSS 或其任何超集(如 Less 和其他)中都是不可能的。始终是 HTML 使用 CSS 中的值，而不是相反。因此，您需要编写一些脚本来满足您的需要。

但是您可以通过Custom Properties 将值从HTML 传递到CSS使用内联样式:

.c {color:  var(--c)}
.m {margin: var(--m)}

<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>

或者甚至像这样:

* {
    color:  var(--c);
    margin: var(--m);
    /* etc. */
}

<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>

但该方法绝对不同于普通方法的样式，即:

<div style="color: blue"> 
... etc. 

它本质上同样丑陋且不可维护。

---

许多人试图通过生成数百个预定义类来实现目标，例如 .mt-1、.mt-2、... .mt- 99 等(因为这在 CSS 预处理器中非常容易实现)。但它是更丑陋的解决方案(我不会详细说明为什么会这样。你会在别处读到它，或者在几个元素之后自己学习)。