less使用

# less

---

### less

    less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，

    增加了变量、Mixin、函数等特性，使用css更易维护和扩展

    less既可以在客户端上运行，也可以借助Node.js在服务端运行

---

### less编译工具

    koala 官网: www.koala-app.com

---

### less中的注释

    以//开头的注释，不会编译到css文件中

    以/**/包裹的注释会编译到css文件中

---

### less中的变量

    使用@来申明一个变量：@pink：pink;

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

    2.作为选择器和属性名:#@{select的值}的形式

    3.作为url:@{url}

    4.变量的延迟加载

---

### less中的嵌套规则

    1.基本的嵌套规则

    2.&的使用

---

### less中的混合

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

    1.普通混合

        定义 .zlp{

        }

        调用 .zlp

    2.不带输出的混合

        定义 .zlp(){

        }

        调用 .zlp

    3.带参数的混合

        @w : 宽度变量

        @h : 高度变量

        @c : 颜色变量

        定义 .zlp(@w,@h,@c){

        }

        执行 .zlp(100px,100px,pink)

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

        定义 .zlp(@w:10px){

            width:@w;

        }

        执行 .zlp(){} 默认 whidth:10px

---

    5.带多个参数的混合

        定义 .zlp(@w:10px,@h:10px,@c:color){

            width:@w;

            height:@h;

            color:@c;

        }

        执行 .zlp(){} 默认 whidth:10px  height:10px  color:pink

---

    6.命名参数

        定义: .zlp(@w:10px,@h:10px,@c:red){

            width:@w;

            height:@h;

            color:@c;

        }

        我只想传一个color颜色

        执行: .zlp(@c:pink)

---

    7.匹配模式

    定义: 

        .zlp(@_){

            width:0;

            height:0;

            overflow:hidden;

        }

        .zlp(L,@w,@c){

            border-withd:@w;

            border-style:dashed dashed dashed soild;

            border-color:transpaprent transpaprent transpaprent @c;

        }

        .zlp(R,@w,@c){

            border-withd:@w;

            border-style:dashed dashed dashed soild;

            border-color:transpaprent transpaprent transpaprent @c;

        }

        .zlp(T,@w,@c){

            border-withd:@w;

            border-style:dashed dashed dashed soild;

            border-color:transpaprent transpaprent transpaprent @c;

        }

        .zlp(B,@w,@c){

            border-withd:@w;

            border-style:dashed dashed dashed soild;

            border-color:transpaprent transpaprent transpaprent @c;

        }

        执行: .zlp(R,100px,pink)

        自动默认匹配上第二个.zlp

        定义一个同名的混合 参数填写 @_  来解决重复的定义

---

    8.arguments变量

        定义 .zlp(@1,@2,@3){

            border:@arguments;

        }

        .zlp(1px solid red)

---

### less运算

    .zlp(){

        width:(100 + 100px)

    }

### less复习

    变量

        @

        变量的延迟加载

        变量是块级作用域

    嵌套

        &:平级

    混合

        什么是混合？

            将一系列规则集引入另一个规则集中(ctrl c + ctrl v)

            混合的定义在less规则有明确定义，使用.的形式来定义

        普通混合(编译到原生css中的)

        不带输出的混合(加双括号)

        带参数的混合

        带默认值的混合

        匹配模式

        arguments

    计算

        加减乘除    计算的一方带单位就可以

---

    继承

    .juzhong{

        width:100px;

    }

    .zlp{

        .inner{

            &:extend(.juzhong)

        }

    }

    形成：

    .zlp .inner,.juzhong {

        width:100px;

    }

    &.extend(.juzhong all)

    加上all 就是 .juzhong 里所有的副属性都带上

---

### 避免编译

    ~"xxx"

    写在xxx里的代码是避免编译的