更改css类变量

问题描述

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

I am looking at less.js, mixin looks like the way touching the variable in css but i am not sure if my problem is solvable using less.js.

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

I want to make some class with parameter, e.g. with the format

marginTop-10或marginTop(15)

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

10,15 are some numbers which i can change to specify the margin top pixel, basically these numbers can be any number.and i will use these class in my paragraph class such as

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

我如何做到这一点?

推荐答案

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

You should first write your Less file, for instance as follows:

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

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

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

前面的Less代码将编译到以下CSS代码:

The preceding Less code will compile into the following CSS code:

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

之后，您可以在HTML中使用

After that you can use in your HTML:

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

请注意，您还可以动态编译类列表，另请参见:

Notice that you can also compile a list of classes dynamically, see also: LESS loops used to generate column classes in twitter - How do they work?

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

Doing that you could write the the following Less code:

@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类变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！