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

改变css类变量

1 个答案: