less学习

less是一种css预编译工具，极大的提高了我们编写代码的效率

注释：

//这是不想暴露的注释
/*
这是想暴露的注释
*/

变量：

使用@声明变量，如@color:red 使用时直接使用@color

• 普通属性值直接使用
• 作为属性、选择器名、URL时需添加{}（一般不将属性或者选择器作为变量）

@property:width;
@selector:#inner;
#box{
    @{property}: 100px;
    height: 100px;
    background-color: red;
    @{selector}{
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  }

• 变量具有延迟加载和块级作用域

//less
@var:0;
#box{
    @var:2;
    #inner{
        @var:3;
        width: @var;
        @var:4;
     
    }
    width: @var;
  }
//编译结果
#box {
  width: 2;
}
#box #inner {
  width: 4;
}

嵌套：

使用&与父级为平行关系

#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
      width: 50px;
      height: 50px;
      background-color: blue;
      &:hover{
          background-color: yellow;
      }
    }
  }

上边例子为inner添加hover，如果不使用&则inner和:hover是与#box和#inner相同的上下级关系，不添加&的编译结果为：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
#box #inner {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner :hover {
  background-color: yellow;
}

混合

当有重复代码时，可以使用混合，混合就是将一系列属性移植到另外的容器

• 不带输出的混合

//混合创建方式 如果不加括号会在css 中出现,也称其为普通混合
.hunhe(){
    width: 50px;
    height: 50px;
    background-color: blue;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe;
    }
    #inner1{
        .hunhe;
    }
  }

编译结果：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
#box #inner {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner:hover {
  background-color: yellow;
}
#box #inner1 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner1:hover {
  background-color: yellow;
}

• 带参数的混合

.hunhe(@width,@height,@color){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe(100px,100px,blue);
    }
    #inner1{
        .hunhe(50px,50px,green);
    }
  }

参数也可以设置默认值

.hunhe(@width:10px,@height:10px,@color:pink){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe(100px,100px,blue);
    }
    #inner1{
        .hunhe(50px,50px,green);
    }
  }

• 命名参数
  当形参和实参不在同一位置时，可以使用命名参数指定

.hunhe(@width:10px,@height:10px,@color:pink){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    #inner1{
    //hunhe 有三个参数，但是只想指定color
        .hunhe(@color:green);
    }
  }

• 匹配模式

可以使用import './utils.less'的方式引入其他less 文件

现在需求可以生成不同方向三角形

//index.less
@import './utils.less';

#box{
    #inner{
        .triangle(L,40px,red);
    }
  }
//utils.less
//使用@_方式在调用.triangle混合的时候会调用该混合
.triangle(@_){
    width: 0px;
    height: 0px;
    overflow: hidden;
}
.triangle(L,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(R,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(T,@width,@color){

    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(B,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}

• arguments

less 混合也有arguments

.border(@width,@type,@color){
    border:@arguments
}
#box{
    #inner{
        .border(10px, solid, red)
    }
  }

计算

less 里可以进行正则运算

//less
#box{
    #inner{
        width: (100 + 100px);
    }
  }
//编译结果
#box #inner {
  width: 200px;
}

继承

先看一个例子：

#box{
    .inner{
        width: 50px;
        height: 50px;
        position: absolute;
         &:nth-child(1){
            background-color: yellow;
        };
        &::nth-child(2){
            background-color: yellowgreen;
        }
    }
   
  }

inner和inner1有相同的相似的地方，所以我们把相同的地方写成混合

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}


#box{
    .inner{
       .mixin();
   
        &:nth-child(1){
            background-color: yellow;
        };
        &::nth-child(2){
            background-color: yellowgreen;
        }
    }
   
  }

编译完成的css

#box .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#box #inner:nth-child(1) {
  background-color: yellow;
}
#box #inner::nth-child(2) {
  background-color: yellowgreen;
}

也可以使用继承，使用extend进行标识下边集合会继承该混合属性

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}

#box{
    .inner:extend(.mixin){
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

现在想往所有继承标签上添加hover事件

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    &:hover{
        background-color: brown;
    }
}

如果直接这样写，inner是不会继承hover的只有mixin继承，这个时候需要添加标识符all

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    &:hover{
        background-color: brown;
    }
}


#box{
    .inner:extend(.mixin all){
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

继承会将所有的元素带上该集合的样式，如果是直接调用则只有该集合下有，如上下边的例子

#box{
    .inner{
    	//1.使用混合调用
    	.mixin();
    	//2.使用继承
    	&:extend(.mixin all);
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

第一种方法编译结果为#box .inner 附带.mixin混合的属性，
第二种方法编译结果为#box .inner,.mixin,#box inner:nth-child(1),#box inner:nth-child(2)携带混合的属性

避免编译

#box{
   .inner{
       width:~"100 + 100px";
   }
  }

#box .inner {
  width: 100 + 100px;
}

less虽然具有表明css结构的目的，但是在开发中需要注意尽量减少嵌套三层以上的样式，会造成性能的降低