时间戳

首页 > 解决方案 > 将值从 HTML 传递到 CSS

html - 将值从 HTML 传递到 CSS

问题描述

我很感兴趣是否可以将值从 html 传递给 css 类？像这个例子：

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

我听说这种方式在 Less 中是可能的

标签： htmlcssvariablesstylesless

解决方案

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

但是，您可以使用内联样式通过自定义属性将值从 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 预处理器中做这件事非常容易）。但它是更丑陋的解决方案（我不会详细说明为什么会这样。您将在其他地方阅读或在几个项目后了解自己）。

推荐阅读