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類庫 封裝常用功能
• 解決加字首等相容性問題