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