css----less预处理器

###less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

###Less编译工具
koala 官网:www.koala-app.com

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

###less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

###less中的嵌套规则
1.基本嵌套规则

            #wrap{

                #inner{

                }
            }
<div id="wrap">
<div id="inner"></div>
</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/less">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: relative;
                 300px;
                height: 300px;
                border: 1px solid;
                margin: 0 auto;
                #inner{
                     100px;
                    height: 100px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
        </style>
        <script src="../less/less.min.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div id="inner"></div>
        </div>
    </body>
</html>

less基本嵌套规则

*{
    margin: 0;
    padding: 0;
}
#list{
    list-style: none;
    line-height: 30px;
     300px;
    background: pink;
    margin: 0 auto;
    li{
        height: 30px;
    }
    a{
        float: left;
       
        &:hover{
             /*&代表父级*/
            color: red;
        }
    }
    span{
         float: right;
    }
   
}

2.&的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index1.css"/>
    </head>
    <body>
        <div id="wrap">
            <div id="inner"></div>
        </div>
    </body>
</html>

html引入

//定义变量
@zero:0;
//定义id选择器
@selector:#wrap;
//定义宽
@w:width;
 //颜色选择
  background: url("../img/zdy.jpg");

//变量的延迟加载
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

###less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合

.juzhong{

}

#box1{

    .juzhong;
}
#box2{

    .juzhong;
}

2.不带输出的混合

.juzhong(){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
#box1{
     100px;
    height: 100px;
    background: pink;
    .juzhong;
}
#box2{
     100px;
    height: 100px;
    background: deeppink;
    .juzhong;
}

3.带参数的混合

.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
     @w;
    height: @h;
    background: @c;
}



#box1{
    .juzhong(100px,100px,pink);
    z-index: 1;
}
#box2{
    .juzhong(200px,200px,deeppink);
}

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

.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
     @w;
    height: @h;
    background: @c;
}

#box1{
    //默认值
    .juzhong;
    z-index: 1;
}
#box2{
    .juzhong(200px,200px,deeppink);
}

5.带多个参数的混合

6.命名参数

.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
     @w;
    height: @h;
    background: @c;
}




#box1{
    .juzhong();
    z-index: 1;
}
#box2{
    .juzhong(@h:200px;@c:deeppink;);
}

7.匹配模式

*{
    margin: 0;
    padding: 0;
}



/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
    border-@w;
    border-color: transparent  transparent  @c transparent ;
    border-style:dashed dashed solid dashed  ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
    border-@w;
    border-color: @c transparent  transparent   transparent ;
    border-style:solid dashed dashed  dashed  ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
    border-@w;
    border-color:  transparent @c  transparent   transparent ;
    border-style: dashed solid dashed  dashed  ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
    border-@w;
    border-color:  transparent   transparent   transparent @c;
    border-style: dashed  dashed  dashed  solid;
}

.triangle(@_,@w:10px,@c:pink){
     0;
    height: 0;
    overflow: hidden;
}

#sanjiao{
    .triangle(top,50px,deeppink);
}
#sanjiao2{
    .triangle(bottom);
}
#sanjiao3{
    .triangle(left);
}
#sanjiao4{
    .triangle(right);
}

View Code

8.arguments变量

*{
    margin: 0;
    padding: 0;
}
.border(@w:10px,@style:solid,@c:deeppink){
    border: @arguments;
}

#wrap{
     200px;
    height: 200px;
    background: pink;
    .border();
}

###less运算
在less中可以进行加减乘除的运算

#wrap{
    @w * 100 ;
    height: 200px;
    background: pink;
}

###less避免编译

*{
    margin: 0;
    padding: 0;
}
#wrap{
    ~"calc(200px + 700px)";
}

###less继承

.juzhong(@w:100px,@h:100px,@c:pink){
    &:extend(.common all);
     @w;
    height: @h;
    background: @c;
}
#wrap{
    position: relative;
    margin: 0 auto;
     400px;
    height: 600px;
    border: 1px solid;
}

#box1{
    .juzhong();
    z-index: 1;
}
#box2{
    .juzhong(@h:200px;@c:deeppink;);
}

性能比混合高

灵活度比混合低