css预处理器（less，sass）

css预处理器

• 基于css的另一种语言
• 通过工具编译成css
• 添加了很多css不具备的特性
• 提升CSS文件的组织

预处理器提供的功能

• 嵌套 反应层级和约束
• 变量和计算 减少重复代码
• Extend和Mixin代码片段
• 循环 适用于复杂有规律的样式
• import CSS文件模块化

嵌套

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}
           

less和sass对于嵌套的处理方法类似，都可以将如上类型的文件处理成普通的css文件

变量和计算

直接看代码

less 中变量前加@，sass中是$

@fontSize: 12px;
@bgColor: red;

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize + 2px;
        &:hover{
            background:@bgColor;
        }
    }
}
           

tips：使用的时候注意相关性，便于后期维护。

Mixin

解决了css中复用的问题

less中只需要
.box(@name)
就可以了
但是在sass中需要
@mixin  box($name)
然后调用时用
@include box($name)
           

@fontSize: 12px;
@bgColor: red;

.box(){
    color:green;
}
/*不带()，会被编译到css文件中*/
.box1{
    .box();
    line-height: 2em;
}
.box2{
    .box();
    line-height: 3em;
}

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}


body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        .block(@fontSize);
    }
    .content{
        .block(@fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}
           

extend

消除重复css代码

less中

@fontSize: 12px;
@bgColor: red;

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav:extend(.block){
        color: #333;
    }
    .content{
        &:extend(.block);
        &:hover{
            background:red;
        }
    }
    /*两种extend方式*/
}
           

sass中

$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @extend .block;
        color: #333;
    }
    .content{
        @extend .block;
        &:hover{
            background:red;
        }
    }
}
           

loop

有规律的样式可以循环生成

less中只能递归

.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    [email protected]{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);
           

sass中支持循环

@mixin gen-col($n){
     @if $n > 0 {
         @include gen-col($n - 1);
         .col-#{$n}{
             width: 1000px/12*$n;
         }
     }
 }

 @include gen-col(12);

/*----------------------------------------*/

@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
}
           

Import

预处理器中的变量是可以跨文件使用的

样式分开写，上线时打包

CSS预处理器框架

• SASS-Compass
• Less - Lesshat/EST
• 提供现成的Mixin
• 类似JS类库 封装常用功能
• 解决加前缀等兼容性问题