更改css类变量

我在看less.js，mixin看起来像是在css中触摸变量，但我不确定我的问题是否可以用less.js解决

我想用参数创建一些类，例如用格式

marginTop-10

或

marginTop（15）

10,15是一些数字，我可以更改它们来指定页边顶部像素，基本上这些数字可以是任何数字

<p class="marginTop(some number)">css help</p>

css帮助

---

如何实现这一点？

您应该首先编写Less文件，例如：

.marginTop(@topMargin) {
margin-top: @topMargin;
}

p.marginTop-10 {
.marginTop(10px); 
}

p.marginTop-15 {
.marginTop(15px); 
}

前面的Less代码将转换为以下CSS代码：

p.marginTop-10 {
  margin-top: 10px;
}
p.marginTop-15 {
  margin-top: 15px;
}

之后，您可以在HTML中使用：

<p class="marginTop-10">css help</p>
<p class="marginTop-15">css help</p>

---

您试图通过mixin'class=“marginTop（some number）””调用或引用类的性质在语义上不太准确，会导致无效的类、css和html。因此，我建议不要使用javascript根据条件设置类，也不要从标记中调用mixin。但我也假设你用它作为前置处理器。这里还有其他的参考资料——对于这类东西，你根本不需要CSS或者更少。有一个普通的HTML样式属性：

非css帮助

。我喜欢动态循环的想法

@margins: 10 20 50;

.marginTop(@i: 1) when (@i <= length(@margins)) {
.marginTop(@i + 1);
@margin-top: extract(@margins,@i);
.marginTop-@{margin-top} {
    margin-top:unit(@margin-top,px);
    }
}

.marginTop();

.marginTop-50 {
  margin-top: 50px;
}
.marginTop-20 {
  margin-top: 20px;
}
.marginTop-10 {
  margin-top: 10px;
}