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兩大弊端：1、一定要放在程式碼最前面。 2、對性能不利。如果真的要使用原生的import，那麼就要：1、以css結尾的時候。 2、http：//開頭。 3、URL（）函數。 4、帶有media queries。

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

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

　　　　eg：

　　　　

<span style="color: #800000;">//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> $common-ff</span>;
}<span style="color: #800000;">
//css输出----
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}<span style="color: #800000;">

//特殊变量
$direction: top;
//应用于class和属性
.border-#</span>{<span style="color: #ff0000;">$direction</span>}{<span style="color: #ff0000;">
  border-#{$direction</span>}<span style="color: #800000;">:1px solid #ccc;
}
//应用于特殊属性同理</span>

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

　　mixin：透過@mixin聲明，@include 呼叫；

　　以前在做專案的時候用手淘的flexible寫了很多這樣的樣式

<span style="color: #800000;">button,input,textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

　　這樣寫太麻煩了，然後學了sass之後就參考手淘他們寫的混合宏自己寫了一個

<span style="color: #800000;">@mixin property-dpr($property,$px-values)</span>{<span style="color: #ff0000;">
        //判断参数是不是单个数字，若是
        @if type-of($px-values) == "number"{
                #{$property</span>}<span style="color: #800000;">: $px-values;
            [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 2;
            }
            [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 3;
            }
        }
        //若为数组则
        @else </span>{<span style="color: #ff0000;">
            //新建两个空数组
            $twodpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            $threedpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            //遍历多值变量
            @each $value in $px-values{
                $twodpr-values</span>:<span style="color: #0000ff;">append($twodpr-values,$value*2)</span>;<span style="color: #ff0000;">
                $threedpr-values</span>:<span style="color: #0000ff;">append($threedpr-values,$value*3)
            </span>}<span style="color: #800000;">
            // 返回处理后的多值变量
               #</span>{<span style="color: #ff0000;">$property</span>}<span style="color: #800000;">: $px-values;
                [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $twodpr-values;
                }
                [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $threedpr-values;
                }
        }
}</span>

　　css、sass產生代碼：

<span style="color: #800000;">//调用mixin
div</span>{<span style="color: #ff0000;">
    @include property-dpr(font-size,12px);
</span>}<span style="color: #800000;">
//css style
div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 7, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="2"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 10, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="3"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

　　今天就先到這裡咯。