前端利器：SASS基礎與Compass入門

SASS是Syntactically Awesome Stylesheete

Sass的縮寫，它是css的一個開發工具，提供了很多便利和簡單的語法，讓css看起來更像是一門語言，這種特性也被稱爲“css預編譯”。它的主要設計思想是讓我們可以按照編程的思路編寫自己的樣式，然後通過“編譯器”生成我們所需要的css文件。

當然，SASS只是css預編譯工具中的一種，類似的工具還有Less、stylus等，SASS起初語法採用縮進排列形式，但對於設計師來說既不直觀還容易出現錯誤。在吸取了Less的一些特性基礎上，SASS3.0有了大幅改進，也就是現在的SCSS。

爲什麼使用SASS/SCSS

• 易維護，更方便的定製 
  對於一個大型或者稍微有規模的UI來說，如果需要替換下整體風格，或者是某個字體的像素值，比如我們經常會遇到panel，window以及portal共用一個背景色，這個時候按照常規的方式，我們需要一個個定位到元素使用的class，然後逐個替換，SASS提供了變量的方式，你可以把某個樣式作爲一個變量，然後各個class引用這個變量即可，修改時，我們只需修改對應的變量。 
  對於編程人員的友好
• 對於一個沒有前端基礎的編程人員，寫css樣式是一件非常痛苦的事情，他們會感覺到各種約束，爲什麼我不能定一個變量來避免那些類似“變量”的重複書寫？爲什麼我不能繼承上個class的樣式定義？。。。SASS/SCSS正是幫編程人員解開了這些疑惑，讓css看起來更像是一門編程語言。
• 效率的提升 
  對於一個前端開發人員來說，我不熟悉編程，也不關注css是否具有的一些編程語言特性，但這不是你放棄他的理由，css3的發展，加之主流瀏覽器的兼容性不一，很多瀏覽器都有自己的兼容hack，很多時候我們需要針對不同的瀏覽器寫一堆的hack，這種浪費時間的重複勞動就交給SASS處理去吧！

安裝與使用

SASS最早來源於Haml項目，但這個工程飽受詬病，很多人認爲它使html失去語義化的特性，因此，並沒有廣泛的得到推廣，而源自於它的SASS受到一致的認可，SASS基於Ruby編寫，也是Ruby On Rails的主力插件。儘管如此，你無需擔心自己沒有Ruby基礎，你需要的只是一個Ruby環境（現在已經有人把SASS移植到python編譯環境下了）。

1. Ruby的下載地址： https://www.ruby-lang.org/zhX 31Xcn/ window下可以直接下載安裝包
2. 安裝SASS，安裝完ruby之後，你就可以直接在命令行執行下面的命令（註冊爲環境變量）： 
   >gem install sass

注：由於國內網絡原因，可能會導致gem安裝插件時失敗，此時可以將gem源切換爲淘寶的ruby鏡像站 http://ruby.taobao.org/

3. 使用

SASS文件的後綴爲.scss，可以使用下面的命令將scss文件編譯爲最終使用的css文件：

sass demo.scss

或者指定css文件名

sass demo.scss product.css

基本語法

1. 變量

SASS支持變量的定義，你可以使用$來定義一個變量，這樣我們就可以把一些公用的樣式定義爲一個變量，在使用時直接引用即可：

$white:#fff;
$font12:12px;
.menu{
    color: $white;
    font-size: $font12;
}

編譯後：

.menu {
  color: white;
  font-size: 12px;
}

2 .嵌套

SASS支持兩種嵌套方式：選擇器嵌套和屬性嵌套。嵌套極大程度上降低了選擇器名稱和屬性的重複書寫。

• 選擇器嵌套 
  選擇器嵌套是指從一個選擇器中嵌套子選擇器，來實現選擇器的繼承關係。

	.header{
	   .logo{
		   display: block;
		   border: none;
	   }
	   ul li{
		   line-break: normal;
	   }
	}

編譯後：

.header .logo {
  display: block;
  border: none;
}
.header ul li {
  line-break: normal;
}

兩者對比不難發現，省去了很大一部分的選擇器的層級聲明。

可以通過&來表示父元素選擇器，比如我們聲明一個a標籤的樣式：

    a{
        text-decoration: none;
        &:hover{
            color: #007998;
        }
    }

編譯後：

a {
  text-decoration: none;
}
a:hover {
  color: #007998;
}

• 屬性嵌套 
  屬性嵌套，是指將帶有相同前綴單詞的屬性提出來，作爲一個公有的屬性，嵌套進其他屬性，就像很多姓氏一樣的人，把這些人姓氏只記一次，後面跟上不同的名字。

    h3{
        font:{
            size:26px;
            weight:normal;
            family:arial
        }
    }

編譯後：

h3 {
  font-size: 26px;
  font-weight: normal;
  font-family: arial;
}

當然實際情況font定義可能更簡潔些，這裏只是做一個示例。

3. 函數

SASS中，你可以對屬性值進行簡單的運算， 比如：

$white:#fff;
$font12:12px;    
.newsize{
        font-size: $font12 + 2;
        color:$white - #007998;
    }

編譯後生成：

.newsize {
  font-size: 14px;
  color: #ff8667;
}

當然除了最基本的加減乘除運算函數，SASS還提供了很多其他有趣的函數，像我們最常用的顏色函數lighten（減淡）和darken（加深）。

.lgt{
    color: lighten($black,10%);
    background-color: darken($white,50%);
}

編譯後可以得到一個運算好的顏色值：

.lgt {
  color: #1a1a1a;
  background-color: gray;
}

更多的函數信息，請查看 SASS官方函數大全

4. 混合

SASS的混合是一個非常值得你去嘗試的特性，如果你對這個概念不太清楚，那麼你可以認爲他就是一個模板的宏定義，而且這個宏還能接收參數。

@mixin box-shadow{
	-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
	box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.funny-box{
	@include box-shadow;
}

編譯後：

.funny-box {
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

帶參數的mixin：

@mixin border-radius($circle:50px){
	-webkit-border-radius: $circle;
	-moz-border-radius: $circle;
	border-radius: $circle;
}
.circle{
	@include border-radius(10px);
}

$circle:50px 爲默認參數，可以通過傳遞參數來覆蓋默認參數，編譯後效果如下：

.circle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

除此之外，minxin還支持多個參數，也支持類似於java中的String...類型的多個值的傳遞。

5. 繼承

既然SASS看起來像一門語言了，那麼其他語言的一些基本特性，也應該是其所具備的，SASS不孚衆望，具備了一個簡單的繼承特性，使用這個特性需要關鍵字 @extend 。

.pclass{
  border: 4px solid #ff9aa9;
}
.subclass{
  @extend .pclass;
  border-width: 2px;
}

編譯後：

.pclass, .subclass {
  border: 4px solid #ff9aa9;
}

.subclass {
  border-width: 2px;
}

使用compass

介紹完SASS的一些基本入門知識點後，你是否有想嘗試下的衝動呢？工欲善其事，必先利其器；這裏簡單介紹下一個開發中經常使用的SASS工具compass，compass是SASS團隊成員開發的，compass是對SASS的一個封裝，目的是爲開發者提供一些豐富的mixin組件以及一些實用的工具模塊。compass也已經成爲ruby on rails的一個標配組件。

安裝

安裝依然使用ruby gem安裝方式，參照前面安裝sass過程，gem命令如下：

gem install compass

現在安裝compass時，一般都附帶安裝上了sass組件，也就是說你可以跳過前面安裝sass的流程了。

getting start

工程的創建

compass create yourpj;

此時會在目錄下生成三個文件：

• config.rb這是個配置文件，主要指定sass源文件地址，以及編譯後生成的css文件地址
• sass存放sass源文件
• stylesheets存放編譯後生成的css

已有工程的初始化

對於已經創建好的工程，要想支持compass編譯，只需要初始化一下就可以(切換到指定目錄下)：

 compass init

編譯

完成sass的開發後，只需要運行下編譯命令：

compass compile

compile支持多種模式的編譯，詳細信息可通過 compass compile -h 查看。

每次編寫sass完成後，都需要手動運行下編譯命令，能不能自動編譯呢？那當然是可以的，只需要對當前工程添加watch監視，如下：

compass watch

組件模塊

前面我們提到compass提供了便捷的組件模塊，我們來一起看看有哪些常用的組件吧：

• reset 瀏覽器樣式重置模塊，減少不同瀏覽器間的差異性
• css3 css3命令模塊
• layout 佈局模塊
• typography 版式模塊
• utilities 工具類

reset使用：

@import "compass/reset";

這樣就會在css中生成重置樣式了，不用我們再自己定義重置樣式了。

css3使用：

@import "compass/css3";

這是個絕對好用的特性，我們知道由於瀏覽器對css3支持的差異性，我們很多時候需要寫一堆針對不同瀏覽器前綴樣式，着實很煩人，css3命令模塊幫我們解決了這個問題，我們只需include相應樣式定義即可，compass會自動爲我們生成針對不同瀏覽器的樣式定義：

　@import "compass/css3";
　　.circle {
　　　　@include border-radius(5px);
　　}

編譯後：

　　.circle {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}