css - 更改 css 类变量

Question

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

我想创建一些带有参数的类，例如格式

marginTop-10 或 marginTop(15)

10,15 是我可以更改以指定边距顶部像素的一些数字，基本上这些数字可以是任何数字。我将在我的段落类中使用这些类，例如

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

我怎样才能做到这一点？

Answer 1

你应该首先编写你的 Less 文件，例如如下:

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

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

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

前面的 Less 代码将 compile插入以下 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>

请注意，您还可以动态编译类列表，另请参阅:LESS loops used to generate column classes in twitter - How do they work?

这样做你可以编写以下 Less 代码:

@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;
}