CSS处理器--Less

---

导入less文件到另一个less文件中

@import "lib";
@import "lib.less";      //less扩展名可省略

---

Less的基本语法

<style type="text/less">
  less代码
</style>

将编写完的less文件(扩展名为.less)进行编译(编译为css文件);编译有两种方式
1.利用考拉工具进行编译
下载地址：http://koala-app.com/
2.利用js文件进行编译<script src="../less/less.min.js"></script>
js代码下载地址：https://cdn.bootcss.com/less.js/3.0.4/less.min.js

---

注释

//---->不会编译到css文件中
/* */---->会编译到css文件中

---

变量

属性值有带单位一般放在变量身上
变量的声明：利用@符号来声明变量
变量的的使用类型：
1.作为普通的属性值：@p:person;
2.作为选择器或属性url：@{selector}  @{url}

/*属性值为变量*/
@bg:green;
div{
background-color:@bg;
}

/*属性名为变量,选择器同属性名使用方法一致*/
@w:width;
div{
 @{w}:20px;
}
@url: "../image/xxx/";
div{
background-image:url(@url);
}

--
变量延迟加载
一个{}代表一个作用域，且每个作用域中的变量不会去别的作用域。
一个作用域需要加载完才能确定变量的值。

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

---

避免编译(~)

从语法上让编译器忽略一些操作

eg:
#wrap{width:~"calc(200px + 700px)";}

---

嵌套(父子结构)

选择器层层嵌套。

ul{
    list-style: none;
    li{
        color: rgb(87, 194, 236);
        &:hover{     //&(返回上一级)
            color: rgb(97, 11, 71);
        }
    }
}

---

混合

将一个规则集引到另一个规则集中(将规则集拷贝一份到另一个规则集中)

--
普通混合(编译时会输出到目标文件中)

/*需要引入的规则集*/
.center{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#wrap{
    .center;  /*引入规则集*/
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    .inner{
        .center;
        width: 100px;
        height: 100px;
        background-color: rgb(123, 233, 248);
    }
}

--
不带输出的混合(编译时不会输出到目标文件中)
在普通混合模式下加一个()

/*需要引入的规则集*/
.center(){
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#wrap{
    .center();  /*引入规则集*/
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    .inner{
        .center();
        width: 100px;
        height: 100px;
        background-color: rgb(123, 233, 248);
    }
}

--
带参数的混合

/*需要引入的规则集*/
@w:width
@h:height
.center(@w,@h){
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width:@w
    height:@h;
}

#wrap{
    .center(300px,300px);  /*引入规则集*/
    /*width: 300px;
    height: 300px;*/
    border: 1px solid #ccc;
    .inner{
        .center();
        width: 100px;
        height: 100px;
        background-color: rgb(123, 233, 248);
    }
}

除此之外还有：带参数并且有默认值的混合，命名参数，匹配模式，arguments变量，这里不再赘述。

---

继承

继承是对选择器的组合，而不是对样式集的复制

nav ul { 
&:extend(.inline); 
background: blue;
 }

---

循环

less本身没有循环的语法是通过递归来构建循环

.test(@n) when(@n > 0){     
    .test(@n - 1);          
    .box{               
        width: 100px * @n;  
    }                   
}                       

.test(12);