Question

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

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

我听说在Less

中可以采用这种方式

Answer 1

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

你可以使用内联样式通过Custom Properties将值从HTML传递到CSS：

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者甚至喜欢这样：

＆＃13;

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

＆＃13;

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

＆＃13;

但是这种方法无法与普通香草方法的造型不同，即：

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

它基本上是相同的丑陋和不可维护的。

许多人试图通过生成数百个预定义类来实现目标，例如.mt-1，.mt-2，... .mt-99等等（因为它非常容易在CSS预处理器中执行）。但它更难看的解决方案（我不打扰你，为什么会这样。你会在其他地方读到这些或在一些项目后学习自己）。

Answer 2

这是一种方法，没有使用LESS。

您可以使用CSS变量：

＆＃13;

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

＆＃13;

.bg_colored {
  background-color: var(--bg);
}

div {
  padding: calc(var(--nb)*5px);
}

＆＃13;

<div id="div1" class="bg_colored" style="--bg: yellow; --nb: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bg_colored" style="--bg: #f66; --nb: 2;">Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>

＆＃13;

在我的代码片段中，CSS变量在HTML元素的style属性中声明请注意，变量名称必须以--开头，并且区分大小写然后，CSS使用这些变量来应用正确的样式。

这些变量值应用于元素及其子元素要在全局范围内使用它，您可以在body标签上声明它。

以下是一些示例链接：https://www.w3schools.com/css/css3_variables.asp

将值从HTML传递给CSS

2 个答案: