正文
办法一：通过双斜杠//的形式来进行正文，应用此办法来进行正文在编译成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