CSS預處理器Sass -- Sass、Less、Stylus比較(2)

前言：本節主要學習下Sass、Less、Stylus在使用方面的異同。

1.環境安裝配置區別。

　　<1>Sass環境配置？

　　　　Sass的底層是Ruby語言開發的，安裝Sass前提須要先安裝Ruby，安裝過程參考 http://www.javashuo.com/article/p-kellicva-u.html

       <2>Less環境配置？

　　　　瀏覽器端用法：

　　　　　　<1>、引入Less文件 <link rel="stylesheet/less" type="text/css" href="styles.less" />

　　　　　　<2>、使用JS文件編譯，執行<script src="less.js" type="text/javascript"></script>，會將styles.less編譯爲styles.css文件。

　　　　node安裝：運行命令 npm install -g less，而後使用require('less')引入項目中使用。

　　　　參考Less官網：http://lesscss.cn/

　　<3>Stylus的安裝？

　　　　前提先安裝node，命令行運行npm install -g stylus，而後使用require('stylus')引入項目中使用。

2.寫法格式異同。

　　<1>Sass的寫法格式？

　　　   縮進格式：舊版本寫法，無需大括號和分號結尾。

h1 
    color: red
    a
        color: green

　　　   兼容CSS的寫法：大括號包含，同時必須分號結尾

h1 {
    color: red;
    a {
        color: green;
    }
}

       <2>Less的寫法格式？

　　　　Less一樣是兼容CSS的寫法，同Sass的第二種寫法。

h1 {
    color: red;
    a {
        color: green;
    }
}

　　<3>Stylus的寫法格式？

　　　　Stylus的寫法更靈活：

　　　　縮進格式：

h1 
    color: red
    a
        color: green

　　　　兼容CSS格式：

h1 {
    color: red;
    a {
        color: green;
    }
}

　　　　怪異寫法：

h1
    color red
    a
        color green
 

　　注意：三種寫法能夠混用。

3.變量聲明異同

　　<1>Sass的變量聲明？

　　　　Sass變量聲明是以$符號開頭的。

$colorRed: red;
$colorGreen: green;
h1 {
    color: $colorRed;
    a {
        color: $colorGreen;
    }
}

       <2>Less的變量聲明？

　　　　Less變量聲明是以@符號開頭的。

@colorRed: red;
@colorGreen: green;
h1 {
    color: @colorRed;
    a {
        color: @colorGreen;
    }
}

　　<3>Stylus的變量聲明？

　　　　Stylus變量聲明能夠以任意字符開頭，沒有過多的限制。

$colorRed: red;   //能夠以$符號開頭
colorGreen: green;  //能夠直接寫
h1 {
    color: $colorRed;
    a {
        color: colorGreen;
    }
}

4.混入的異同

　　<1>Sass的混入？

　　　　以@開頭，其中的參數便令使用$符號開頭。

    @mixin alert($color: red) {
        color: $color;
    }

       <2>Less的混入？

　　　　以.開頭，其中的參數便令使用@符號開頭。

    .alert(@color: red) {
        color: @color;
    }

　　<3>Stylus的混入？

　　　直接是函數名，參數就是正常的函數命名形式。

    alert(colorArg: red) {
        color: colorArg;
    }

5.繼承的異同

　　<1>Sass的繼承？

　　　　使用@extend實現元素之間樣式的繼承。

    .block {
        margin: 10px;
        padding: 5px;
    }
    p {
        @extend .block;
        color: red;
    }

       <2>Less的繼承？

　　　　less中繼承無需使用@extend，直接嵌套其餘元素的樣式。

    .block {
        margin: 10px;
        padding: 5px;
    }
    p {
        .block;
        color: red;
    }

　　<3>Stylus的繼承？

　　　　stylus實現繼承方式和sass同樣，都是使用@extend實現。

    .block {
        margin: 10px;
        padding: 5px;
    }
    p {
        @extend .block;
        color: red;
    }

總結：這節學習Sass、less、stylus之間的基本區別，主要是書寫格式、變量定義、混入、繼承之間的區別，其餘更多的區別須要更多的學習。

注意：變量、混合、嵌套、繼承、顏色函數稱爲CSS預處理器的五大特性。