Less: Getting Started
文章目录

Less: Getting Started

Preparation

有几种方法可以编译对应的 .less 文件

  1. Kaola (推荐, 支持自动编译)
  2. NodeJS 三方库
  3. 浏览器端支持

Less 相对 CSS 就如同 jQuery 相对于 JS, 我们提供.less 文件然后编译成 css, 最终还是要引用 css 文件到 html

1
<link rel="stylesheet" href="styles/main.css">

Variables

  • 就是一些很典型的变量的定义以及使用.
  • 需要注意的是, 定义变量的时候不是用等于号, 而是用冒号.
1
2
3
4
5
6
7
@fontSize: 20px + 20; // 定义变量的时候要用冒号
@color: #ccc - 10; // =255-10, but...Are you crazy?

body{
background: lightgreen;
font-size: @fontSize;
}

Mixin

Example

主要是用于重用

1
2
3
4
5
6
7
8
9
10
11
12
.a,
#b {
color: red;
}

.mixin-class {
.a(); // 直接将上面已经定义的 styles 放到这里
}

.mixin-id {
#b; // 同样的将上面已经定义的 styles 放到这里, 这里不写括号也是可以的。
}

最终将会得到如下的输出:

1
2
3
4
5
6
7
8
9
10
11
12
.a,
#b {
color: red;
}

.mixin-class {
color: red;
}

.mixin-id {
color: red;
}

No outputting the mixin

如果你想要创建一个混合集, 但是却不想让它输出到你的样式中, 你可以在混合集的名字后面加上一个括号.

1
2
3
4
5
6
7
8
9
.my-mixin {
color: black;
}
.my-other-mixin() { // 注意这个地方,我们多加了一个括号, 最终这段就不会输出,而是会直接混合到下方。background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}

输出:

1
2
3
4
5
6
7
8
.my-mixin {
color: black;
}

.class {
color: black;
background: white;
}

Parametric Mixins(Mixins with arguments)

可以声明一系列的方法:

1
2
3
4
5
6
7
8
9
10
11
12
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#box{
width: 50px;
height: 50px;
background: red;
.border-radius(50px)
}

以及参数可以有默认值:

1
2
3
.border-radius(@radius: 10px) {
……
}

当然没有默认值的方法是必须要传一个有效的值进去的.

@Variables

和 JS 类似, 这个变量包含了所有传进来的参数.

1
2
3
4
5
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}

Pattern-matching

经常性有那么一种情况:

我写了一个 mixin A, 又写了一个 mixin B 然后现在我希望给 A 和 B 都加一些属性

使用模式匹配就可以解决这个问题

1
2
3
4
5
6
7
8
9
.mixin(dark; @color) { // A
color: darkeni(@color, 10%);
}
.mixin(light; @color) { // B
color: lighten(@color, 10%);
}
.mixin(@_; @color) { // 这个地方写上希望共同添加的属性
display: block;
}

上方这个代码的关键点在于, 共同属性需要用 @_ 这个参数来接收, 另外因为是 mixin, 类似重载, 所以 mixin 也必须要写上完全的参数, 所以上方的最后一个参数 @color 必须要提供

现在, 如果运行它:

1
2
3
4
5
@switch: light;

.class {
.mixin(@switch; #888);
}

这将得到如下 CSS:

1
2
3
4
.class {
color: #a2a2a2;
display: block; // 所有的调用都会带上这一段
}

Nested Rules

1
2
3
4
5
6
7
8
9
10
11
12
13
body{
#box{
width: 100px;
height: 50px;
background: violet;

}
a{
&:hover{ // 这个地方的 & 代表选择上一层选择器, 因此这里就相当于 a:hover
color: green;
}
}
}