(一)Less入门基础班

本节知识点

• 注释
• 变量
• 混合
• 嵌套规则
• 运算
• 命名空间
• 引入
• 提高优先级

(一) 注释

在Less 里面  //注释不会保存到生成的css文件中
而相反 /* */会被保存到生成的css文件中

(二)变量

• (1) 变量的定义
  变量都是以@开头
  变量是支持延迟加载的，使用前加载和使用后加载，无区别。
  要是定义了两个相同的变量，即变量名相同，那么LESS会以最后的解构为准,必须在作用域内，出了作用域，则没用了。

变量是用@开头，分号结尾
例如
@huize: #ccc;
.header{
 background:@huise
} 

• (2) 变量作为属性或者选择器

要是作为属性或者选择器那么前面除了有@还必须加上{}

@kuandu:width;
@toubu:header;
.@{toubu}{
@{kuandu}:320px;
}
//编译以后就变成
.header{
  width:320px;
}

• (3)变量作为URL(CSS里面存放地址)
  变量的时候加上双引号。引用的时候还是@{}
  例如

@url:"../images/01.png";
.header{
 background:url("@{url}") no-repeat center;
}

(三) 混合

• 混合的定义
  混合就是一种将一系列属性从一个规则集引入("混合")到另外的规则集的方式

• (1) 普通混合

就是把好几个类共有的属性拿出来，封装成一个类，然后这几个类引用即可
普通混合里面公共类不能有变量，要不然解析不了
例如:

 .all{
     width:320px;
     height:320px;
     float:left;
 }
 .header1{
    @{beijing}:@hongse;
    .all; 
 }
 .header2{
     @{beijing}:@huise;
     .all;
 }
//解析以后
.all {
  width: 320px;
  height: 320px;
  float: left;
}
.header1 {
  background: red;
  width: 320px;
  height: 320px;
  float: left;
}
.header2 {
  background: #ccc;
  width: 320px;
  height: 320px;
  float: left;
}

• (2)隐藏共有类。

简单来说就是Less里面有混合类，但是编译后变成CSS文件的不想输出这个混合类可以这样
在共有类后面加()这样解析的时候变成CSS文件就不会输出这个类
简单来时就是在共有类后面加个()即可

  /*混合测试*/ 
 .all(){
     width:320px;
     height:320px;
     float:left;
 }
 .header1{
    @{beijing}:@hongse;
    .all; 
 }
 .header2{
     @{beijing}:@huise;
     .all;
 }
/*编译开始*/
.header1 {
  background: red;
  width: 320px;
  height: 320px;
  float: left;
}
.header2 {
  background: #ccc;
  width: 320px;
  height: 320px;
  float: left;
}

• (3)带选择器的混合。

要是在作用域里面出现& 他找的就是父级，例如

 .all(){
     width:320px;
     height:320px;
     float:left;
     &:hover{
         background:black;
     }
 }
编辑后就是
.all:hover{} === &:hover

要是&在选择器后面，就表示把父元素的标签放到那个位置
例如

  div{
    width:800px;
    height:400px;
    .all2 &{   
        background:red; 
    }
  }
//编译后的结果
div {
  width: 800px;
  height: 400px;
}
.all2 div {
  background: red;
}

看一个例子

  /*混合测试*/ 
 .all(){
     width:320px;
     height:320px;
     float:left;
     &:hover{
         background:black;
     }
 }
 .header1{
    @{beijing}:@hongse;
    .all(); 
 }
 .header2{
     @{beijing}:@huise;
     .all();
 }
//编译后的结果就是
/*混合测试*/
.header1 {
  background: red;
  width: 320px;
  height: 320px;
  float: left;
}
.header1:hover {
  background: black;
}
.header2 {
  background: #ccc;
  width: 320px;
  height: 320px;
  float: left;
}
.header2:hover {
  background: black;
}

• (3)带参数的混合。

  /*混合测试*/ 
 .all(@lvse,@kuandu,@gaodu,@beijing,@beijingse){
     @{kuandu}:320px;
     @{gaodu}:320px;
     float:left;
     @{beijing}:@beijingse;
     &:hover{
         background:@lvse;
     }
 }
 .header1{
    .all(@lvse,@kuandu,@gaodu,@beijing,#ccc); 
 }
 .header2{
    .all(@lvse,@kuandu,@gaodu,@beijing,red);
 }

//解析后变成
/*混合测试*/
.header1 {
  width: 320px;
  height: 320px;
  float: left;
  background: #ccc;
}
.header1:hover {
  background: green;
}
.header2 {
  width: 320px;
  height: 320px;
  float: left;
  background: red;
}
.header2:hover {
  background: green;
}

• (4)带参数的混合,并且有默认值)

简单来说就是参数后面加:和值这样表示有默认值

  /*混合测试*/ 
 .all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc){
     @{kuandu}:320px;
     @{gaodu}:320px;
     float:left;
     @{beijing}:@beijingse;
     &:hover{
         background:@lvse;
     }
 }
 .header1{
    .all(@lvse,@kuandu,@gaodu,@beijing); 
 }
 .header2{
    .all(@lvse,@kuandu,@gaodu,@beijing,red);
 }
//编译以后，这样背景色默认值就是:#ccc
.header1 {
  width: 320px;
  height: 320px;
  float: left;
  background: #ccc;
}
.header1:hover {
  background: green;
}
.header2 {
  width: 320px;
  height: 320px;
  float: left;
  background: red;
}
.header2:hover {
  background: green;
}

(四) 嵌套规则

• 简单来说就是按照层级结构，父套子，子套孙。要是同级就是在外面

 .content {
    width: 800px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
    background:@huise;
    li{
        @{kuandu}: 350px;
        margin-left: 50px;
        overflow: hidden;
      a{
          div{
              color:@hongse
          }
      }  
    }
  }
/*编译以后就是*/ 
.content {
  width: 800px;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;
  background: #ccc;
}
.content li {
  width: 350px;
  margin-left: 50px;
  overflow: hidden;
}
.content li a div {
  color: red;
}

(五) 运算法则

在LESS中任何数值，颜色，和变量都可以计算
这里特别注意的就是必须要有单位。写一次就足够了。然后运算符与前后用空格隔开
涉及到优先级的话用小括号即可。
例如

.content {
    width: 400px + 400;
    height: auto;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
    background:@huise;
    li{
        @{kuandu}: 350px;
        margin-left: 50px;
        overflow: hidden;
      a{
          div{
              color:@hongse
          }
      }  
    }
  }  
//编译后的结果就是
.content {
  width: 800px;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;
  background: #ccc;
}
.content li {
  width: 350px;
  margin-left: 50px;
  overflow: hidden;
}
.content li a div {
  color: red;
}

(六) 命名空间

要是在引用公共类的时候使用>表示指定找到哪个类
例如 HTML 结构

 <div id="text1">
    <div class="a">
      测试a的颜色
    </div>
    <div class="b">
      测试b的颜色
    </div>
  </div>

要是没有 >

#gonggong(){
    @{kuandu}:400px + 400;
    @{gaodu}: 400px + 400;
    @{beijing}:@hongse;
    .a{
        color:blue;
    }
    .b{
        color:black;
    }
}
#text1{
    #gonggong;
} 
//编译后的结果就是
#text1 {
  width: 800px;
  height: 800px;
  background: red;
}
#text1 .a {
  color: blue;
}
#text1 .b {
  color: black;
}

要是有>号的引用

#gonggong(){
    @{kuandu}:400px + 400;
    @{gaodu}: 400px + 400;
    @{beijing}:@hongse;
    .a{
        color:blue;
    }
    .b{
        color:black;
    }
}
#text1{
    #gonggong>.a;
} 
//编译的结果就是
#text1 {
  color: blue;
}

(七) 引入

你可以引入一个或多个Less文件，这些文件的所有变量都可以在被引入的LESS文件中使用

1.新建一个 main.css

@huise:#ccc;
@hongse:red;
@kuandu:width;
@wrap:wrap;
@gaodu:height;
@beijing:background;
@lvse:green;
@url:"../images/01.jpg";
@value:100px;

2.引入这个less文件

@import "config.less";

3.这样引入后便可以使用这些变量了

(八) 提高优先级 !important

 .all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc){
     @{kuandu}:320px;
     @{gaodu}:320px;
     float:left;
     @{beijing}:@beijingse;
     &:hover{
         background:@lvse;
     }
 }
 .header3{
    .all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc) !important;
 }

编译后记得结果就是

.header3 {
  width: 320px !important;
  height: 320px !important;
  float: left !important;
  background: #ccc !important;
}
.header3:hover {
  background: green !important;
}