Compass是sass延伸出來的工具,可以將sass或scss的語法compile成CSS語法
使用sass的好處就是可以以程式的角度去撰寫CSS(變數、巢狀、迴圈、繼承)
由於Compass是用Ruby開發的,所以需要先安裝Ruby
接著再用gem安裝Compass
gem install compass
建立Compass專案
compass create project_name
建立完後,Compass會產生一些檔案,其中config.rb是專案的設定檔,產生完後先手動把設定檔裡的資料夾建一建
接著就可以在sass目錄裡開發(注意:如果使用scss的人,檔案名稱必須命名為xxx.scss,而sass則要命名為sass,不然compile會出錯)
編輯完後到專案根目錄下compile
compass compile
成功後config.rb的css路徑裡就會有css檔產生出來囉
scss基本語法
變數及運算
width : 100px; height : 100px; #sass { width:width - 50px; height:height; }
巢狀
width : 100px; height : 100px; #doc { width:width; height:height; background:red; .doc_inner { width:width - 50px; height:height - 50px; background:blue; } }
父選擇器(Parent Selector)
a { color:red; &:hover { color:blue; } }
Mixins
@mixin hover-link { color:red; &:hover { color:blue; } } a { @include hover-link; }
Mixins加入參數
@mixin hover-link(color1:red, color2:blue) { color:color1; &:hover { color:color2 } } a { @include hover-link($color2:green); }
繼承
width : 100px; height : 100px; #sass { width:width; height:height; background:red; } #css { @extend #sass;
條件判斷
width : 100px; height : 100px; #sass { @if width == 10px { background:red; } @else { background:green; } width:width; height:$height; }
迴圈
@for i from 1 through 5 { .item-#{i} {
width: 100px * $i;
}
}
i : 1; @while i <= 5 { .item-#{i} { width: 100px * i; } i : i + 1; }
引入(import)
a.scss
#sass { background:red; }
b.scss
#sass { width:100px; height:100px; }
test.scss
@import "a","b";
Categories: CSS