[CSS]Compass取代CSS

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;
}

巢狀

<div id="doc">
	<div class="doc_inner">
	</div>
</div>

$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);  }

官方的Mixins

繼承

$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";