[开发工具]Less学习笔记

less：css预处理器

less官网

less是一门CSS预处理语言，它拓展了CSS语言，增建了==变量、混合、函数==等特性，使CSS更易维护和拓展。less可以运行在Node或浏览器端。常用css预处理器还有sass，stylus。

less在vscode中的使用

Easy LESS的功能：当你新建一个.less文件时，会自动将它编译，并生成相同名称的.css文件

1. 在插件市场搜索并安装插件：Easy LESS

2. 点击左下角的设置按钮，选择设置，搜索easy，选择在setting.json中编辑

   "less.compile": {
       "compress": false,
       "sourceMap": false,
       "out": "./"
   }
    //(compress:移除不必要的空格)
    //（sourceMap：生成map文件）
    //（out：生成css文件位置）
   

3. 重启vscode

less中的注释

• 以//开头的注释，不会被编译到css文件中
• 以/**/包裹的注释会被编译到css文件中

less中的变量

使用**@**来声明一个变量：@color:pink

1. 作为普通属性值来使用:直接使用@color

   @color:pink;
   .class{
           color：@color
           }
   

2. 作为选择器和属性名：#{pink}的形式

   @m:#wrap;
   @{m}{
       height:100px;
   }
   

3. 作为URL：@{URL}

4. 变量的延迟加载

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

   编译生成的css文件：

   .class {
     one: 1;
   }
   .class .brass {
     three: 3;
   }
   

less中的嵌套规则

1. 基本嵌套规则

2. &的使用

   &代表平级，通常配合伪类使用！！！

   @color:pink;
   @selector:#wrap
   @{selector}{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           position:absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
           margin: auto;
           background: @color;
           height: 100px;
           width: 100px;
           &:hover{
               background:green;
           }
       }
   }
   

less中的混合

混合：将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合

   .juzhong{
       position:absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       background: pink;
       height: 100px;
       width: 100px;
   }
   #wrap{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           .juzhong;
       }
       .inner2{
           .juzhong;
       }
   }
   

2. 不带输出的混合:是指输出时，不会将混合样式输出到编译后的.css文件中

   .juzhong(){
       /*在不想输出的样式后面加上括号就可以*/
       position:absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       background: pink;
       height: 100px;
       width: 100px;
   }
   #wrap{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           .juzhong;
       }
       .inner2{
           .juzhong;
       }
   }
   

3. 带参数的混合

   .juzhong(@w,@h,@c){
       position:absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       background:@c;
       height: @h;
       width: @w;
   }
   #wrap{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           .juzhong(100px,100px,pink);
       }
       .inner2{
           .juzhong(150px,50px,pink);
       }
   }
   

4. 带参数并且有默认值的混合

   .juzhong(@w:150px,@h:50px,@c:green){
       position:absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       background:@c;
       height: @h;
       width: @w;
   }
   #wrap{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           .juzhong(100px,100px,pink);
       }
       .inner2{
           .juzhong();
       }
   }
   

5. 带多个参数的混合

   上面全都是QwQ

6. 命名参数

   .juzhong(@w:150px,@h:50px,@c:green){
       position:absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       background:@c;
       height: @h;
       width: @w;
   }
   #wrap{
       position: relative;
       width: 300px;
       height: 400px;
       border: 1px solid;
       margin: 0 auto;
       .inner{
           .juzhong(100px,100px,pink);
       }
       .inner2{
           .juzhong(@c:black);
           // 如果不使用命名参数，就会默认将black认为是第一个属性的参数
       }
   }
   

7. 匹配模式

   .triangle(@_,@w,@c){
       // @_:每次调用同名函数，都会先调用它
       width: 0px;
       height: 0px;
       border-style: solid;
       overflow: hidden;
   }
   .triangle(L,@c,@w){
       border-width: @w;
       border-color: transparent transparent transparent @c;
   }
   .triangle(R,@c,@w){
       border-width: @w;
       border-color: transparent @c transparent transparent;
   }
   .triangle(T,@c,@w){
       border-width: @w;
       border-color: @c transparent transparent transparent;
   }
   .triangle(B,@c,@w){
       border-width: @w;
       border-color: transparent transparent @c transparent;}
   #wrap > .sjx{
       .triangle(T,pink, 40px)
   }
   

8. arguments变量

   .border(@1,@2,@3){
       border: @arguments;
   }
   #wrap > .sjx{
       .border(1px,solid,black);
   }
   

   编译后的css

   #wrap > .sjx {
     border: 1px solid black;
   }
   

less中的计算

// 编译前
#wrap > .sjx {
    width: (100+100px);
    height: (100px+50);
    background-color: pink;
  }
// 编译后
#wrap > .sjx {
  width: 200px;
  height: 150px;
  background-color: pink;
}

less中的继承

性能比混合高

灵活度比混合低

.center{
    position: absolute;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    margin:auto;
}
*{
    margin: 0;
    padding:0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner:extend(.center){
        // :extend()是继承混合
        &:nth-child(1){
            width: 100px;
            height: 100px;
            background: pink;
        }
        &:nth-child(2){
            width: 50px;
            height: 50px;
            background: deeppink;
        }
    }
}

less中的避免编译

*{
    margin: 100*10px;
    padding:~"cacl(100px+100)";
    // ~" "引号当中的东西不会被编译
}