SASS

一、安裝

　　http://www.cnblogs.com/slogeor/p/3843423.html

二、參考

　　http://www.ruanyifeng.com/blog/2012/06/sass.html

　　http://www.w3cplus.com/sassguide/syntax.html

三、特別注意

　　導入

　　　　sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。可是若是你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，

              而是以@import方式存在。

　　默認變量

　　　　sass的默認變量僅須要在值後面加上!default便可。 $defalutLeft: 20px !default;

　　　　sass的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可，必須　　　　在以前進行覆蓋$defalutLeft: 30px; $defalutLeft: 20px !default;

　　　　特殊變量：若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

　　　　

    $borderDefault: top !default;
        .div{
　　　　　　border-#{$borderDefault}:1px solid #aaa;
　　　　}

    //sass
    $borderDefault: top !default;
        .div{
            border-#{$borderDefault}:1px solid #aaa;
       }
        //css
       .div {
　　　　　 border-top: 1px solid #aaa; 
　　　　}        

　　　　多值變量：多值變量分爲list類型和map類型，簡單來講list類型有點像js中的數組，而map類型有點像js中的對象。

　　　　

　　　　//list
　　　　$linkColor: #08c #333 !default;
　　　　a{
　　　　　 color:nth($linkColor,1);
　　　　　 &:hover{
　　　　　　　　 color:nth($linkColor,2);
　　　　　　}
　　　　}

　　　　//map
　　　　$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
　　　　@each $header, $size in $headings {
　　　　　#{$header} {
　　　　　　　font-size: $size;
　　　　 }
　　　　}
　　　//css
　　　h1 {font-size: 2em; }
　　　h2 {font-size: 1.5em; }
　　　h3 {font-size: 1.2em; }

 

　　　　目前變量機制：在選擇器中聲明的變量會覆蓋外面全局聲明的變量。(這也就人們常說的sass沒有局部變量)

　　　　

 　//scss
　$fontSize: 12px;
　body{
　　$fontSize: 14px;
　　font-size:$fontSize;
　}
　
　p{
　　 font-size:$fontSize;
　　}
　//css
　body {font-size: 14px; }
　p {font-size: 14px; }