简介
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言（插件）。主要用来方便css书写的，可以提取公共样式，设置变量、清晰结构等。
变量、混合、嵌套、运算、转义、函数、命名空间、映射、作用域、注释、导入， 共计11类功能
变量
变量：css属性值，以变量的形式设置
变量：支持直接赋值、变量计算
@width: 120px; // 直接赋值
@height: @width - 40px; // 变量计算
.box {
width: @width;
height: @height;
}
混合
混合：引用选择器的样式。
.border {
border: 1px solid #eee;
}
.border-top {
border-top: 1px solid #eee;
}
.box-border {
width: 300px;
height: 150px;
.border(); // 设置 全边框
}
.box-border-top {
width: 300px;
height: 150px;
.border-top(); // 设置 上边框
}
嵌套
用清晰的结构化，来代替选择器的层级关系
.outer {
.inner {
p {
font-size: 12px;
}
}
}
运算
算术运算： +、-、*、/ 可以对任何数字、颜色或变量进行运算。
单位转换：以最左侧为准。转换失败则会忽略单位
失效转换：px → cm 或 rad → %
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
@base: 2cm * 3mm; // 结果是 6cm
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
转义
允许使用任何字符串来作为属性或变量值
// v3.6之前
@min768: ~'(min-width: 768px)';
.element {
@media @min768 {
font-size: 1.2rem;
}
}
// 3.5之后，简写
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
函数
内置多种函数用于转换颜色、处理字符串、算术运算等
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%` 转为百分比
color: saturate(@base, 5%); // 颜色饱和度增加 5%
}
// if 三个参数，相当于三目运算
@some: foo;
div {
margin: if((2 > 1), 0, 3px);
color: if((iscolor(@some)), @some, black);
}
命名空间+访问符
引用一个选择器链中的样式组（类似混入）
被引用选择器
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
}
引用选择器
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
映射
将一组可能的属性值，以对象形式出现，方便调用
// 定义值集
#colors() {
primary: blue;
secondary: green;
}
// 使用值集
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
作用域
变量或混合 从前作用域开始，逐级向父级查找，就近原则
@var: red; // 父级作用域
#page {
@var: white; // 当前作用域
#header {
color: @var; // white 当前作用域优先、就近原则
}
}
注释
行注释、块注释
/* 一个块注释
* style comment!
*/
@var: red;
// 这一行被注释掉了！
@var: white;
导入
导入外部样式（其他文件）
@import "library"; // library.less
@import "typo.css";
