Less基本语法
Less中文网
关键字:变量、嵌套、混合、运算、作用域、导入、映射、函数。
# 1.变量(Variables)
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
1
2
3
4
5
6
2
3
4
5
6
# 2.嵌套(Nesting)
.clearfix {
display: block;zoom: 1;
&:after { /* & 运算符用在伪类上 */
content: " ";display: block;font-size: 0;height: 0;clear: both;visibility: hidden;
}
}
1
2
3
4
5
6
2
3
4
5
6
# 3.混合(Mixins)
/* .borderRadius()可以看做一个方法,@radius是参数。混合可以提高代码的复用性。*/
.borderRadius(@radius) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius(3px);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 4.运算(Operations)
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
/* 所有操作数被转换成相同的单位 */
@conversion-1: 5cm + 10mm; /* 结果是 6cm */
@conversion-2: 2 - 3cm - 5mm;/* 结果是 -1.5cm */
@incompatible-units: 2 + 5px - 3cm; /* 结果是 4px */
/* 变量+运算 */
@base: 5%;
@filler: @base * 2; /* 结果是 10% */
@other: @base + @filler; /* 结果是 15% */
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5.作用域(Scope)
首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 6.导入(Importing)
@import "library"; // library.less
@import "typo.css";
1
2
2
# 7.函数(Functions)
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。参见:函数手册
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); /* 结果是 50% */
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 8.映射(Maps)
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上次更新: 2020/09/27, 13:09:00