将值从 HTML 传递到 CSS

Question

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

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

我听说在 Less 中可以采用这种方式

Answer 1

也许这就是您要找的东西？ CSS: Attr()

您可以将值绑定到一个属性，然后在 css 中获取该属性，如下所示：

CSS

<p data-foo="hello">world</p>

CSS

[data-foo]::before {
    content: attr(data-foo) " ";
}

结果

你好世界

Answer 2

这是一种不使用LESS的方法。

1. 使用 CSS 变量：
   变量可以在 HTML 元素的style 属性中声明。
   然后，CSS 将从 HTML 中获取值并应用正确的样式。

2. 添加一些 JavaScript：
   现在可以动态修改变量的值。

⋅ ⋅ ⋅

使用示例：

• 背景颜色在 HTML 中设置，（固定）
• 如果单击，div1 的填充将增大。 （动态）

// When clicking on the div1, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
  var pad = this.style.getPropertyValue("--pad");
  this.style.setProperty("--pad", parseInt(pad) + 1);
}

.divs {
  background: var(--bg);
  padding: calc(var(--pad)*5px);
}

<div id="div1" class="divs" style="--bg: #ff6; --pad: 1;">div1</div>
<div id="div2" class="divs" style="--bg: #f66; --pad: 2;">div2</div>

⋅ ⋅ ⋅

关于 CSS 变量： 变量名必须以-- 开头并且区分大小写。
这些变量值应用于元素及其子元素。
要全局使用，可以在 body 标签上声明。

这里是一些示例的链接：https://www.w3schools.com/css/css3_variables.asp

Answer 3

不，您想要的方式在 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 预处理器中非常容易做到）。但它是更丑陋的解决方案（我不会详细说明为什么会这样。您将在其他地方阅读或在几个项目后了解自己）。