共计 6528 个字符，预计需要花费 17 分钟才能阅读完成。
正文
办法一：通过双斜杠 // 的形式来进行正文，应用此办法来进行正文在编译成 css 后，正文在 css 文件中不会进行展现。
办法二：通过斜杠加型号 /** */ 的形式来进行正文，正文会留在编译生成的 css 文件中。
变量
变量的根底应用
变量的定义是通过 @变量: 变量值 的模式实现的。
@width: 100px; // 这里肯定须要有分号结尾
.box {width: @width;}
// 编译后果
.box {width: 100px;}变量的扩大应用
less变量不仅仅能代表平时的 css 属性值，有其它很多的场景下也能应用到 less 变量。
选择器
@selector: h2;
@{selector} {color: red;}
// 编译后果
h2 {color: red;}URL 门路
在 less 应用门路来引入文件时，须要在门路两边加上单引号或者双引号
@images: '../images'; // 这里必须要有引号
.box {background-image: url('@{images}/img.jpg'); // 这里也必须要是应用引号，并且在门路中应用变量时须要大括号包裹变量
}
// 编译后果
.box {background-image: url('../images/img.jpg')
}在应用 import 关键字引入其它 less 时，变量也能发挥作用
// external.less
@color: red;
// index.less
@path: '../style/'
@import '@{path}/external.less'
.box {color: @color;}
// 编译后果
.box {color: red;}属性名
变量值是属性名或属性名一部分时，在援用的时候须要带上大括号。
@color: color;
.box {@{color}: green;
background-@{color}: red;
}
// 编译后果
.box {
color: green;
background-color: red;
}混合办法
有写过 css 的同学应该晓得，在一些状况下，局部类选择器有雷同的 css 属性设置，如果如果想要在各个类选择器中复用这部分 css 属性，那么须要把公共的 css 属性独自拿进去，并且为每个类选择器设置这些公共 css 属性，而后再独自为每个类选择器设置各自的 css 属性。
.box1,.box2 {
color: #222;
background-color: #ddd;
border-radius: 8px;
}
.box1 {// box1 的 css 属性设置}
.box2 {// box2 的 css 属性设置}
在 less 中，能够把这些步骤进行简化，容许将一个类的属性作为另一个类的属性，这样能够存储多个属性的设置，在其它的类中失去复用。
根底应用办法
.box {
color: #222;
background-color: #ddd;
border-radius: 8px;
}
.box1 {.box();
// box1 的 css 属性设置
}
.box2 {
.box;
// box2 的 css 属性设置
}
// 编译后果
.box {
color: #222;
background-color: #ddd;
border-radius: 8px;
}
.box1 {
color: #222;
background-color: #ddd;
border-radius: 8px;
// box1 的 css 属性设置
}
.box2 {
color: #222;
background-color: #ddd;
border-radius: 8px;
// box2 的 css 属性设置
}留神：你可能会看到有些 less 文件外面的混合形式没有在类选择器后加上括号，例如.box，这种形式也是可行的，无需纠结应用哪种形式，本人在编写 less 时放弃格调对立即可。
这里看到公共款式也被编译到 css 中去了，如果不想公共款式被编译到 css 中去，那么只须要在类名前面加上括号。
.box() { // 减少括号
color: #222;
background-color: #ddd;
border-radius: 8px;
}
.box1 {.box();
// box1 的 css 属性设置
}
.box2 {
.box;
// box2 的 css 属性设置
}
// 编译后果
.box1 {
color: #222;
background-color: #ddd;
border-radius: 8px;
// box1 的 css 属性设置
}
.box2 {
color: #222;
background-color: #ddd;
border-radius: 8px;
// box2 的 css 属性设置
}能够发现 .box 这个类没有在 css 中呈现，这样就达到了目标。
混合参数
less中混合的用法和 js 中函数的用法比拟类似，既能够通过传参的形式来传值，也能够给与参数默认值，上面给出示例代码
@borderWidth: 50px;
@borderStyle: dotted;
@borderColor: green;
.box(@width: 10px, @style: solid, @color: red) {
margin-top: 20px;
width: 200px;
height: 200px;
background-color: lightskyblue;
border: @width @style @color;
}
.box1 {.box(); // 没有传入参数，那么应用函数默认参数
}
.box2 {.box(@borderWidth, @borderStyle, @borderColor);
}
.box3 {.box(@style: double); // 为单个参数传参
}
// 编译后果
.box1 {
margin-top: 20px;
width: 50px;
height: 50px;
background-color: lightskyblue;
border: 10px solid red;
}
.box2 {
margin-top: 20px;
width: 50px;
height: 50px;
background-color: lightskyblue;
border: 50px dotted green;
}
.box3 {
margin-top: 20px;
width: 50px;
height: 50px;
background-color: lightskyblue;
border: 10px double red;
}匹配
能够利用关键字进行匹配，这个和函数重载的形式相似
.triangle(@_, @width: 10px, @color: lightskyblue) { // @_代表占位符
width: 0px;
height: 0px;
border: @width solid @color;
}
.triangle(top, @width: 10px, @color: lightskyblue) {border-color: transparent transparent @color transparent;}
.triangle(right, @width: 10px, @color: lightskyblue) {border-color: transparent transparent transparent @color;}
.triangle(bottom, @width: 10px, @color: lightskyblue) {border-color: @color transparent transparent transparent;}
.triangle(left, @width: 10px, @color: lightskyblue) {border-color: transparent @color transparent transparent;}
.triangle1 {.triangle(top);
}
.triangle2 {.triangle(right);
}
.triangle3 {.triangle(bottom);
}
.triangle4 {.triangle(left);
}
// 编译后果
.triangle1 {
width: 0px;
height: 0px;
border: 10px solid lightskyblue;
border-color: transparent transparent lightskyblue transparent;
}
.triangle2 {
width: 0px;
height: 0px;
border: 10px solid lightskyblue;
border-color: transparent transparent transparent lightskyblue;
}
.triangle3 {
width: 0px;
height: 0px;
border: 10px solid lightskyblue;
border-color: lightskyblue transparent transparent transparent;
}
.triangle4 {
width: 0px;
height: 0px;
border: 10px solid lightskyblue;
border-color: transparent lightskyblue transparent transparent;
}条件判断
在 less 中没有 if else 这样的判断关键字，但有相应的要害来代替，那就是when。
// when 的根底用法
.border(@width) when(@width > 200px) {border-color: lightskyblue;}
// not 关键字相当于!，用于取反
.border(@width) when not (@width > 200px) {border-color: green;}
// and 相当于 &&
.border(@width, @height) when (@width > 200px) and (@height < 200px) {border-color: red;}
// 逗号运算符相当于 ||
.border(@width, @height) when (@width > 200px), (@height < 200px) {border-color: blue;}数量不定的参数
在 less 中混合办法能够像 js 中rest语法一样，接管不定长度的参数
.boxShadow(@a, @rest...) {
width: 275px;
height: 70px;
background-color: blue;
box-shadow: @arguments; // @arguments 接管了所有的参数
text-shadow: @a @rest;
}
.box4 {
margin-top: 20px;
.boxShadow(12px, 12px, 0px, 0px, red);
}
// 编译后果
.box4 {
margin-top: 20px;
width: 275px;
height: 70px;
background-color: blue;
box-shadow: 12px 12px 0 0 red;
text-shadow: 12px 12px 0 0 red;
}命名空间
命名空间对通用类名进行隔离，防止类名命名抵触的问题
.container1 {
.title {color: #222;}
}
.container2 {
.title {color: #ddd;}
}
.box1 {.container1 > .title}
.box2 {.container2 > .title}
// 编译后果
.box1 {color: #222;}
.box1 {color: #ddd;}important 关键字
important关键字用于减少 css 属性的优先级，用于笼罩其它的同名 css 属性，当在混合中应用 important 时，类中的所有 css 属性都会被追加上 important 标记。
.base {
color: red;
background: green;
}
.box {.base() important;
}
// 编译后果
.box {
color: red !important;
background: green !important;
}循环
在 less 中循环是通过表达式和模式匹配组合的类递归的形式来实现的，这里举个例子，应用 less 中的循环实现对文本行数限度的枚举。
.line(@i) when (@i > 0) {.line-@{i} {-webkit-line-clamp: @i;}
.line(@i - 1); // 类递归调用
}
.line(3);
// 编译后果
.line-3 {-webkit-line-clamp: 3;}
.line-2 {-webkit-line-clamp: 2;}
.line-1 {-webkit-line-clamp: 1;}合并
有些 css 属性须要减少空格或逗号来拼接属性值，在混合场景下，能够通过在属性名后追加后缀实现拼接
逗号
.base-shadow {
width: 275px;
height: 70px;
background-color: lightgreen;
box-shadow+: 0px 12px 0px 0px lightyellow;
}
.mixin-shadow {box-shadow+: 12px 0px 0px 0px lightcoral;}
// 编译后果
.base-shadow {
width: 275px;
height: 70px;
background-color: lightgreen;
box-shadow: 0px 12px 0px 0px lightyellow;
}
.mixin-shadow {
width: 275px;
height: 70px;
background-color: lightgreen;
box-shadow: 0px 12px 0px 0px lightyellow, 12px 0px 0px 0px lightcoral;
}空格
.base-comma {transform+_: scale(1.5); // +_后缀减少空格
}
.mixin-comma {.base-comma();
transform+_: translate(50%); //+_后缀减少空格
}
// 编译后果
.base-comma {transform: scale(1.5);
}
.mixin-comma {transform: scale(1.5) translate(50%);
}本义
通过在转义字符后面加上 ~ 符号，编译器不会对~ 润饰的表达式进行编译。
.box {color: ~'green';}
// 编译后果
.box {color: green;}看看 antd 中在是如何应用 less 中本义，这里举一个 antd modal 组件的例子。
@ant-prefix: ant;
@dialog-prefix-cls: ~'@{ant-prefix}-modal'
@{dialog-prefix-cls} {position: fixed;}
// 编译后果
ant-modal {position: fixed;}这里其实就是属性值变量拼串的场景，我的项目前缀拼上具体的组件名充当组件类名前缀。
可能有同学会纳闷，干么非要应用本义，间接应用变量的根底用法不就行了吗？那就试试看会有什么样的后果。
@ant-prefix: ant;
@dialog-prefix-cls: @{ant-prefix}-modal // error: variable value expected那就换一种形式
@ant-prefix: ant;
@dialog-prefix-cls: "@{ant-prefix}-modal"
// 编译后果
"ant-modal" { // error: at-rule or selector expected
z-index: inherit;
position: fixed;
}css对带双引号的选择器是不意识的，开始报错。
论断：就是在应用变量拼串的时候须要应用本义来辅助应用。
继承
就和 oop 语言中的继承有着相似的含意，能够从其它类继承其属性。
.base {color: red;}
.box {&:extend(.base);
background: green;
}
// 编译后果
.base,
.extend-base {color: red;}
.extend-base {background: green;}参考
https://www.w3cschool.cn/less/nested_directives_bubbling.html