Sass初使用

　　看慕課網materliu前輩的sass教程，http://www.imooc.com/learn/364。順便把剛作完的項目重構一下，而後把一些筆記和心得都寫在這裏~

　　首先安裝sass，這裏直接參考 大漠前輩的安裝教程 http://www.w3cplus.com/sassguide/install.html。

　　而後安裝compass， 在ruby command 裏面打命令，gem install compass 就行了；就現階段來講，對compass理解的不是不少，看完sass那個視頻以後就以爲暫時只是用來編譯scss文件和壓縮css（霧）。

　　compass指令：

　　compass create compass；

　　compass watch;

 

　　sass語法：

　　當文件不用編譯的時候，能夠用_前綴下劃線來標記而後命名，一般函數或者變量都放在一個文件夾裏面。

　　文件引進來能夠用import ，文件名後綴能夠不用寫， 然而這個不是css原生的import。

　　css原生的import兩大弊端：一、必定要放在代碼最前面。二、對性能不利。若是真的要使用原生的import，那麼就要：一、以css結尾的時候。二、http：//開頭。三、URL（）函數。四、帶有media queries。

　　sass變量：好東西，譬如每次找顏色的時候，顏色代碼都記不住，若是用變量的話就不用這麼慢慢找顏色代碼了，直接看一下變量文件，一目瞭然咯。

　　　　特殊變量，在特定狀況下使用的變量；

　　　　eg：

　　　　

//普通變量及其使用
$common-ff :"微軟雅黑"; //字體設置
body{
    font-family: $common-ff;
}
//css輸出----
body{
    font-family: "微軟雅黑";
}

//特殊變量
$direction: top;
//應用於class和屬性
.border-#{$direction}{
  border-#{$direction}:1px solid #ccc;
}
//應用於特殊屬性同理

　　　　多值變量：顧名思義就是多個值咯。譬如 0 1px 2px 3px之類的。裏面的函數有不少，暫時只用過append($list,$value,[$separator])，這個函數。

　　mixin：經過@mixin聲明，@include 調用；

　　之前在作項目的時候用手淘的flexible寫了不少這樣的樣式

button,input,textarea{
    font-size: 12px;
}
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea{
    font-size: 24px;
}
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea{
    font-size: 36px;
}

　　這樣寫太麻煩了，而後學了sass以後就參考手淘他們寫的混合宏本身寫了一個

@mixin property-dpr($property,$px-values){
        //判斷參數是否是單個數字，如果
        @if type-of($px-values) == "number"{
                #{$property}: $px-values;
            [data-dpr="2"] & {
                #{$property}: $px-values * 2;
            }
            [data-dpr="3"] & {
                #{$property}: $px-values * 3;
            }
        }
        //若爲數組則
        @else {
            //新建兩個空數組
            $twodpr-values:();
            $threedpr-values:();
            //遍歷多值變量
            @each $value in $px-values{
                $twodpr-values:append($twodpr-values,$value*2);
                $threedpr-values:append($threedpr-values,$value*3)
            }
            // 返回處理後的多值變量
               #{$property}: $px-values;
                [data-dpr="2"] & {
                    #{$property}: $twodpr-values;
                }
                [data-dpr="3"] & {
                    #{$property}: $threedpr-values;
                }
        }
}

　　css、sass生成代碼：

//調用mixin
div{
    @include property-dpr(font-size,12px);
}
//css style
div {
  font-size: 12px;
}
/* line 7, ../../sass/common/_mixin.scss */
[data-dpr="2"] div {
  font-size: 24px;
}
/* line 10, ../../sass/common/_mixin.scss */
[data-dpr="3"] div {
  font-size: 36px;
}

　　今天就先到這裏咯。