注释：

以//开头的注释不会被编译到CSS文件中

被/**/包裹的注释会被编译到CSS文件

变量：

使用@来声明一个变量：属性值 @color：gray;属性名 @m:margin;选择器 @selector:#box

• 作为普通属性值来使用：直接使用@color
• 作为选择器和属性名：@{selector}/@{m}的形式（不常用，了解就好）
• 变量延迟加载

延迟加载是当一个作用域的代码全部解析完，才去加载@var

.class{ @var:1 m:@var //3 @var:3}

嵌套规则：

• 基本嵌套规则
• &的使用

&表示上一级选择器，可用于伪元素

若想表示 .box:hover，直接将:hover嵌套于.box得到的CSS为.box :hover(有空格)

正确写法：

.box{  &:hover{}}

混合：

将一系列属性抽取出来，可在任意元素中调用；

1. 普通混合 会在CSS中输出

.base{  display:absolute;  width:100px;  height:100px;}//会在编译后的CSS中出现.box1{  .base;}.box2{  .base;}

2. 不输出的混合“（）” 不会存在于CSS中

.base(){
     display:absolute;  width:100px;  height:100px;}//不会在编译后的CSS中出现.box1{
     .base;}.box2{
     .base;}

 

3. 带参数的混合

• 可设置默认值
• 当形参与实参个数不一致是，可使用命名参数

LESS文件

.base(@w：50px,@h：50px){
   //默认值@w: 50 @h: 50  display: absolute;  width: @w;  height: @h;}.box1{
     .base(100px,100px);}//为传参，使用默认值.box2{
     .base();}//命名参数.box3{
     .base(@w:200px);}

CSS文件

.box1{
     width:100px;  height:100px;}.box2{
     width:50px;  height:50px;}

4. 模式匹配

LESS文件

.pos(r){
     display: relative;  }.pos(a){
     display: absolute;  }.pos(f){
     display: fix;  }.pos(@_){
     width: 100px;  height: 80px;  }.box1{
     .pos(r);   .box2{     .pos(a);  }   }

CSS文件

.box1{
     width: 100px;  height: 80px;  display: relative;    }.box1 .box2{
     width: 100px;  height: 80px;  display: absolute;    }

运算：

不需要都带单位，有一个带了即可

width: 100px + 10 =>width:110px