Question

可以在类名中传递CSS的参数吗？例如：

.mrg-t-X {
   margin-top: Xpx;
}

<span class="mrg-t-10">Test</span>

在这个例子中，X应该是10。

Answer 1

不，不是。我们最接近的是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 { ... }
...

Answer 2

如今，您可以在样式属性中使用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>

Answer 3

没有你的代码是错的但你可以在标签内写css

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

Answer 4

使用CSS直接传递参数是不可能的，但您不是第一个要问的人 - 请查看this question查看CSS和JavaScript选项以及this可能会有所帮助关于属性选择。

这只会在您查看margin-top的几个变量时有所帮助，但我不知道您使用的是什么上下文。根据您使用它的内容，可能有更好的方法

最简单的方法可能就是将内联样式添加到您的范围<span style="margin-top:10px">但我尝试远离内联CSS！

Answer 5

也许您正在寻找SCSS或LESS。它有mixins，变量等，它自动编译真实和长css。它被用于此目的，并且用相同的结果写出越来越少的CSS。

http://sass-lang.com/guide

http://lesscss.org/

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

祝你好运！

类名的CSS属性值

5 个答案: