CSS Set动态值依赖于类[duplicate]

attr() function ,但这只适用于 content 属性:

figure::before {
  content: attr(data-before) ', ';
}

figure::after {
  content: attr(data-after) '!';
}

<figure data-before="Hello" data-after="world"></figure>

也许有一天我们可以将它扩展到其他地方,但目前这是不可能的。

如果你想使用 .mrg-t-X 类,则需要为每个类定义单独的样式规则 X

.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...

现在你可以用 CSS variable

自定义属性(有时称为CSS变量或级联变量)是由CSS作者定义的实体,其中包含要在整个文档中重用的特定值。它们是使用自定义属性表示法设置的(例如。, --main-color: black; )使用 var() 功能(例如。, color: var(--main-color);

复杂的网站有大量的CSS,通常有很多重复的值。例如,同一颜色可能在数百个不同的地方使用,如果需要更改颜色,则需要全局搜索和替换。自定义属性 ,然后在多个其他位置引用。另一个好处是语义标识符。例如, --main-text-color 更容易理解 #00ff00 ,尤其是在其他上下文中也使用相同的颜色时。

例子

  span {
  display: block;
  margin-top: var(--m-t);
}

html {
  background: repeating-linear-gradient(to bottom, transparent, 10px, lightgrey 10px, lightgrey 20px);} /* see 10px steps  */

<span style="--m-t:50px">one</span>
<span style="--m-t:85px">two</span>
<span style="--m-t:110px;">three</span>

http://sass-lang.com/guide

http://lesscss.org/

 @size: 10px;
 .class { font-size: @size;  }

祝你好运!

不,你的代码错了

*<span style="margin-top:Xpx;">*

仅仅使用CSS是不可能直接传递参数的,但是你不是第一个要求签出的人 this question this 可能对属性选择有帮助。

这只会帮助你看一些变量 margin-top 但我不知道你在什么情况下用这个。根据你使用它的目的,可能有更好的方法。

最简单的方法可能就是将样式内联添加到span中 <span style="margin-top:10px"> 但我尽量远离内联CSS!