预处理语言Less

预处理语言Less

一、安装/编译less文件

1. npm insatll less -g安装less
2. lessc -v查看less版本号
3. 进入less文件所在文件夹输入lessc style.less style.css

二、Less语法

(1)声明变量

@Color:red;
//字符转拼接使用{}
@imgURL:"../images/";
h1{
    color:@Color;
    background:url("{@imgURL}bg.jpg") repeat;
}

(2)Mixins混合（函数封装公共代码）

1. 不带参数

   //定义
   .mixins(){
       color:red;
   }
   //调用
   h1{
       .mixins();
   }
   

2. 带参数

   //定义 默认参数：@color:red,@size:18px;
   .mixins(@color:red,@size:18px;){
       background:@color;
       font-size:@size;
   }
   //调用
   h1{
       .mixins(yellow,22px);//自己传递参数
   }
   

(3)模式匹配

//定义
//公共部分使用@_
.mixins(@_,@color){
    display:block;
}
//筛选部分
.mixins(black,@color){
    font-szie:14px
    color:@color;
}
.mixins(yellow,@color){
     font-szie:22px
    color:@color;
}
//调用
h1{
    .mxins(yellow,red);//等同于.mixins(@_,@color)+.mixins(yellow,@color)
}

(4)颜色函数

1. 色彩三要素：色相（颜色名称），饱和度（鲜艳程度），明度（明暗程度）

2. 颜色函数

   • //明暗
     lighten(@color,10%);//比@color亮10%的颜色
     darken(@color,10%);//比@color暗10%的颜色
     

   • //饱和度
     saturate(@color,10%);//比@color浓10%的颜色
     desaturate(@color,10%);//比@color淡10%的颜色
     

   • //色相
     spin(@color,10);//色相增加10%
     spin(@color,-10);//色相减少10%
     

   • //混合
     mix(@color1,@color2);
     

(5)嵌套

1. 具有层级关系的CSS样式

2. <div class="leader">
       <div class="employee1">
           <div class="trainee1">
               
           </div>
       </div>
       <div class="employee2">
           <a class="trainee2">
               <i></i>
               <i></i>
               <i></i>
           </a>
       </div>
   </div>
   

   @color:red;
   .leader{
       .employee1{
           .trainee1{
               
           }
       }
       .employee2{
           a{
               &:hover{//表示父元素
                   color:@color;
               }
               &>*{
                  font-sizeL20px; 
               }
           }
       }
   }