less学习教程

官方文档：https://less.bootcss.com

less 变量延迟加载：

延迟加载机制的两个特点：1、由内到外寻找变量。2、先加载变量再赋值

例子: three中@var的值会等里面的变量全部加载完了之后再加载，即为变量的延迟加载，所以为3。

@var:0;
.class{
	@var:1;
	.brass{
		@var:2;
		three: @var;  //3
        @var:3;			
	}  
   	one: @var  //1
}

less的嵌套规则：

&的使用：代表是平级

less混合：

普通混合、不带输出的混合(没有括号)、带参数的混合、带参数并且有默认值的混合（@x，10px，@y）、带多个参数的混合、命名参数（当形参和实参个数不匹配的时候，可以用具体的指定）、匹配模式、arguments变量

普通混合：

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {  
   border-top: dotted 1px black;  
   border-bottom: solid 2px black; 
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {  
   color: #111;  
   .bordered(); 
} 
.post a {  
   color: red;  
  .bordered(); 
}

带参数的混合：.xxx(@x,@y,@z…){ 对应的属性设为@x， @y ， @z } 后面调用传给形参

命名参数实例： .test(@x, @y ,@z) 实际使用的时候，只想指定一个z，那么可 .test(@z:xxx);

匹配模式：（ie6兼容问题，可以通过设置 overflow：hidden解决–开启haslayout）

​ xxx(@_,)第一个参数为@__的话，所有调用都会先调用@_里的模式

arguments变量：实参列表伪数组

​ 例子：

.border(@1,@2,@3){
 	border:@arguments;
}

less计算：加减乘除都能行，建议看文档

less继承：

.inner:extend(.juzhong){}
或者 ..inner{
    &:extend(.juzhong)
}

less避免编译：加波浪号~ 避免编译

height: ~'calc(300px - 30px)';