将值从 HTML 传递到 CSS

Question

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

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

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

Answer 1

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

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

Answer 2

也许这就是您所寻找的？CSS：属性（）

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

CSS

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

CSS

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

结果

你好世界

Answer 3

这是一种无需执行此操作的方法使用 LESS 的

\n

\n

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

   \n
\n

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

   \n
\n

\n

\xe2\x8b\x85 \xe2\x8b\x85 \xe2\x8b\x85

\n

使用示例：

\n

\n
• 背景颜色在 HTML 中设置，（固定）
\n
• 如果单击，div1 的内边距将会增大。（动态的）
\n

\n

\r\n

\r\n

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

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

\xe2\x8b\x85 \xe2\x8b\x85 \xe2\x8b\x85

\n

关于 CSS 变量：\n变量名称必须以--和 开头，区分大小写。
\n这些变量值应用于元素及其子元素。
\nTo use it globally, you can declare it on the body tag.

\n

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

\n