看慕課網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:
//普通變量及其使用 $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; }
今天就先到這里咯。