官方链接:Less 快速入门 | Less.js 中文文档 - Less 中文网
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。
变量(Variables)
/*less*/
@width: 20px; // 定义变量
@height: @width + 20px;
#header {
width: @width; // 使用变量
height: @height;
border: 1px solid red;
}
编译后
/*css*/
#header {
width: 20px;
height: 40px;
border: 1px solid red;
}
混合(Mixins)
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
/*less*/
@width: 20px;
@height: @width + 20px;
#set { // 定义
width: @width;
height: @height;
border: 1px solid red;
}
#header{
#set() // 使用
}
嵌套(Nesting)
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
/*less*/
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
编译后
/*css*/
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
映射(Maps)
从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。
/*less*/
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
编译后
.button {
color: blue;
border: 1px solid green;
}
导入(Importing)
“导入”的工作方式和你预期的一样。你可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";