文章目錄
  1. 1. 语言特性
    1. 1.1. Less变量
    2. 1.2. 嵌套
    3. 1.3. 运算
    4. 1.4. 函数
    5. 1.5. 父选择器&
    6. 1.6. 其它

我们知道css里面的一切都是常量,less在css的基础上引入变量,函数等。这样相当于一个动态css。编写好的Less可以通过编译得到css文件,或者浏览器端直接引用x.less。less的特性使得其成为便于理解和维护的CSS。平时修改css只能通过编辑器的查找,现在代码结构一目了然,和查找html节点一样查找即可。

语言特性

Less变量

可以在less文件中定义变量,给变量赋值并使用。

1
2
3
4
5
6
@wrap-width:30px;
.divwrap{
width: @wrap-width;
background-color: #eee;
overflow: hidden;
}

编译成css后

1
2
3
4
5
.divwrap {
width: 30px;
background-color: #eee;
overflow: hidden;
}

嵌套

我觉得嵌套可以大大的减少代码量,增强代码结构,与Html嵌套相对应.
例如这是Html

1
2
3
4
<div class="divwrap">
<div class="childdiv1">ccc</div>
<div class="childdiv2">ccc</div>
</div>

这是less

1
2
3
4
5
6
7
8
9
10
11
12
@wrap-width:30px;
.divwrap{
width: @wrap-width;
background-color: #eee;
overflow: hidden;
.childdiv1{
background-color: #222;
}
.childdiv2{
background-color: #777;
}
}

生成的css,很明显,less在结构上更清晰

1
2
3
4
5
6
7
8
9
10
11
.divwrap {
width: 30px;
background-color: #eee;
overflow: hidden;
}

.divwrap .childdiv1 {
background-color: #222;
}

.divwrap .childdiv2 {
background-color: #777;
}

运算

@child1-width@wrap-width,前者等于后者见5px,单位意义相同的都可以做运算。

1
2
3
4
5
6
7
8
9
10
11
@wrap-width:30px;
@child1-width:@wrap-width - 5px;
.divwrap{
width: @wrap-width;
background-color: #eee;
overflow: hidden;
.childdiv1{
width: @child1-width;
background-color: #222;
}
}

1
2
3
4
5
6
7
8
9
.divwrap {
width: 30px;
background-color: #eee;
overflow: hidden;
}

.divwrap .childdiv1 {
width: 25px;
background-color: #222;
}

函数

less提供一些基础的内置函数查看,也可以自定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
@wrap-width:30px;
.getchildwidth(@temp-width:30px){
width:@temp-width - 10px;
}
.divwrap{
width: @wrap-width;
background-color: #eee;
overflow: hidden;
.childdiv1{
.getchildwidth();
background-color: #222;
}
}

上面定义了一个函数getchildwidth`,下面是我们所期望的css。

1
2
3
4
5
6
7
8
9
.divwrap {
width: 30px;
background-color: #eee;
overflow: hidden;
}

.divwrap .childdiv1 {
width: 20px;
background-color: #222;
}

父选择器&

1
2
3
4
5
6
7
8
9
.divwrap{ 
width: 30px;
height: 20px;
background-color: #eee;
overflow: hidden;
&:hover {
background-color: #ccc;
}
}

上面这段代码中的&代表着divwrap自己

1
2
3
4
5
6
7
8
9
.divwrap {
width: 30px;
height: 20px;
background-color: #eee;
overflow: hidden;
}

.divwrap:hover {
background-color: #ccc;
}

其它

当然还包括很多其它的东西,例如循环loop,合并,scope等

comments powered by Disqus
文章目錄
  1. 1. 语言特性
    1. 1.1. Less变量
    2. 1.2. 嵌套
    3. 1.3. 运算
    4. 1.4. 函数
    5. 1.5. 父选择器&
    6. 1.6. 其它