LESS样式语言精讲-优快云博客

less是一种动态样式语言，属于css预处理器的范畴，扩展了css语言

1.关于注释 : // 注释的会出现在css中

/**/ 注释的不会出现在css中

                           编译后的css
//不会出现在css中           
/*出现在css中*/                         /*出现在css中*/
*{                                     *{
  margin:0;                               margin:0;       
  padding:0;                              padding:0;
}                                        }

2.关于变量

使用@声明变量变量为块级作用域

（1）作为普通变量使用 @变量名

@c:red;                         编译之后          
#div{                                         #div{
  border:1px solid @c;                            border: 1px solid #ff0000;
}                                              }

（2）作为选择器，属性名或作为地址 @{变量名} @{url}

@c:border;                         编译后
@d:#div;                                   #div{
@{d}{                                             border: 1px solid red;
 @{c}:1px solid red;                            }
}

(3）变量为延迟加载

@val:0;
 #div{
   @val:1;
   z-index:@val;           //@val:2
   @val:2;
 }

3.嵌套的基本规则和&的使用

#div{
  width: 30px;
  border:1px solid black;
  .inner{
    width: 20px;
  }
  &:hover{
    background: red;
  }
}

编译后
#div {
  width: 30px;
  border: 1px solid black;
}
#div .inner {
  width: 20px;
}
#div:hover {
  background: red;
}

4.less的混合

（1）什么是混合：将一系列属性规则集引入另一个规则集

（2）普通混合会编译到css中

/*在css中输出*/              使用 .center;
.center{
  top:0;
  left:0;
  right:0;
  bottom: 0;
  margin: auto;
}
//不会编译到css中
.center(){                          .center();
  top:0;
  left:0;
  right:0;
  bottom: 0;
  margin: auto;
}

编译后
/*在css中输出*/
.center {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

(3)带参数的混合

带参数默认值的混合

//带参数
.center(@t,@l){               调用  .center(0px,0px)
  top:@t;
  left:@l;
  right:0;
  bottom: 0;
  margin: auto;
}
//参数默认值
.center(@t:0,@l:0){                 .center();
  top:@t;
  left:@l;
  right:0;
  bottom: 0;
  margin: auto;
}

(4)带命名参数的混合

.center(L,@t,@l){   //用l来代表这段代码，做标识           调用  .center(L,0,0)
  top:@t;
  left:@l;
  right:0;
  bottom: 0;
  margin: auto;
}
.center(R,@t,@l){                                             .center(R,0,0)
  top:@t;
  left:@l;
  right:10;
  bottom: 10;
}

(5) 匹配模式

//有@_  每调用一次 .triangle(L/R,100PX,red) 之前都会运行这个混合 
.triangle(@_,@wwww,@ccccc){          
    width: 0px;
    height: 0px;
    overflow: hidden; 
}
//画出了一个三角形
.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;   
    border-color:transparent @c transparent transparent ;
}

.triangle(R,@w,@c){
    border-width: @w;
    border-style:dashed  dashed dashed solid;
    border-color:transparent  transparent transparent @c;
}

（6）amrguments

.border(@w,@style,@c){
    border: @arguments;
}

5.关于继承

性能 > 混合

灵活 < 混合

.center {   //定义混合
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.center:hover{
  background: red!important;
}
#wrap{ 
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{     //嵌套
        &:extend(.center all);   //继承混合  
        &:nth-child(1){
           width: 100px;
           height: 100px;
           background: pink;
        }
        &:nth-child(2){
           width: 50px;
           height: 50px;
           background: yellow;
        }
    }
}


编译之后
.center,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.center:hover,
#wrap .inner:hover {
  background: red!important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background: pink;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: yellow;
}

6.避免编译

*{
    margin: 100 *  10px;    //less的运算可以只用带一个单位
    padding: ~"cacl(100px + 100)";  
}


编译为css之后
* {
  margin: 1000px;
  padding: cacl(100px + 100);
}