1) 普通变量
less 以@开头定义变量，并且使用时直接键入@名称。注意：作为属性值的变量不能添加大括号
2) 选择器变量
让选择器变成一个动态的
作为选择器的变量在使用的时候需要添加大括号（{}），变量的前面可以添加选择操作符
3) 属性变量
属性变量使用的时候也需要添加大括号（{}）。
4) Url变量
变量名 必须使用大括号包裹
5) 申明变量
定义：@name：{
Key：value；
Key：value；
}
使用：@name{}；
6) 变量运算
规则：
加减法时，以第一个数据的单位为基准。
乘除法时，注意单位一定要统一。
7) 变量的作用域
就近原则，不是指代码的位置，而是指代码的层级结构。
如果是同一级后面的生效，类似于提升。
不同级的变量，距离最近的生效。距离是指定义时的位置。
8) 用变量的定义变量
解析的顺序是从后向前逐层解析。
1) &符号，表示的是上1级选择器的名字。
2) 嵌套覆盖原有样式
3．媒体查询
/* Less */
#main{
//something...
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (max-width:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (max-width:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
4．混合方法
1) 无参数方法 方法如声明的集合，使用值直接键入名称即可。
要点：“.”与“#”都可以作为方法前缀。可以不适用小括号，但是为了避免css格式混淆，建议加上小括号“（）”。
2) 具体参数方法
.setSize(@width_size,@height_size){
width:@width_size;
height:@height_size;
}
3) 默认参数方法
Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。 @arguments 犹如 JS 中的 arguments 指代的是全部参数。 传的参数中 必须带着单位。
4) 不定参
不确定参数的个数
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#main{
.boxShadow(1px,4px,30px,red);
.textShadow(1px,4px,30px,red);
}
/* 生成后的 CSS */
#main{
box-shadow: 1px 4px 30px red;
text-shadow: 1px 4px 30px red;
}
5) 方法的匹配模式
类似于多态。有点类似于switch case
同一个方法名的多个方法，由于传入的参数不同而实现不同的功能。
6) 方法的命名空间
有一个嵌套关系
7) 条件语句
Less没有if / else 但是less具有一个when，and，not与“，”语法。
#card{
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
8) 条件运算符
比较运算有：> >= = =< <
=代表是等于
除去关键字true以外的值其他都会被默认为fales
9) 循环语法
Less并没有提供一个for等循环的方法但是可以使用递归的方法实现。
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
10) 方法中的important
方法使用了important，相当于这个方法中的每一个属性都设置了一遍important，不允许覆盖
.border{
border: solid 1px red;
margin: 50px;
}
#main{
.border() !important;
}
/* 生成后的 CSS */
#main {
border: solid 1px red !important;
margin: 50px !important;
}
5．Less注释
Less的注释语法类似于js
//单行注释
/* ---*/多行注释
6．属性的拼接语法
+代表的是逗号，+_代表的是空格。
7． 继承(扩展)
extend是less的一个伪类。它可以继承所匹配声明中的全部样式。
1) all全局搜索替换
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {}
/* 生成的 CSS */
#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
2) 扩展的注意事项
选择器和扩展之间 是允许有空格的：pre:hover :extend(div pre).
可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这 与 pre:hover:extend(div pre, .bucket tr)一样。
扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。 如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。
8. 导入
在less文件中可以引入其他的less文件。使用关键字import。
① 导入less文件，可以省略后缀。
② @import可以放在任何地方
③ reference 引入一个less文件，但不会编译它
④ once 表明相同的文件只会被导入一次
⑤ multiple 使用@import (multiple)允许导入多个同名文件。
9. 避免编译
#main{
width:~'calc(300px-30px)';
}
/* 生成后的 CSS */
#main{
width:calc(300px-30px);
}
10. less中可以使用js
less本身是使用js实现的，所以在less中可以使用js。
Js的代码写在字符串模板里。
