本文將介紹sass的一些基本概念，比如說「變數」、「混合引數」、「巢狀」和「選擇器繼承」等。著作權歸作者所有。
什麼是sass？
sass是一門非常優秀的css預處語言，他是由hampton catlin創立的。它可以減化css的工作流，使開發者更加容易開發，維護css樣式。
例如，你是否在特定的樣式表中查詢和替換乙個十六進製制的顏色而煩惱？或者你正在尋找乙個計算器為多欄布局的寬度計算而頭痛？（不用擔心，sass能幫你解決這樣的煩惱）。
sass和css非常相似，但是在sass中是沒有花括號（｛｝）和分號（；）的。
如下面的css：
#skyscraper_ad在sass中，上面的css**你要寫成下面這樣：#leaderboard_ad
#skyscraper_adsass使用兩個空格來定義巢狀的區別。display: block
width: 120px
height: 600px
#leaderboard_ad
display: block
width: 728px
height: 90px
你現在看過了sass是如何書寫的，接下來我們一起看一些sass方面的介紹，讓sass在你手中變得不再可怕。
變數（variables）
在sass中定義變數，是用「$」符號宣告，然後後面跟變數名稱。在這個例子中，定義變數「red」，在變數名後使用冒號（：），然後緊跟變數值：
$red: #ff4848sass還內建了函式功能，例如變暗（darken）和變亮（lighten），他們可以幫助你修改變數。
在這個例子中，段落要使用乙個比「h1」標籤更深的紅色，就可以這樣使用：
$red: #ff4848你也可以在相同的變數上做加減運算的操作。如果我們想將顏色變黑，我們也可以在變數的基礎上減乙個十六進製制的顏色，例如「#101」。如果我們想把字型大小調大「10px」，我們也可以在字型大小的變數基礎上加上這個值。$fontsize: 12px
h1 color: $red
p color: darken($red,10%)
/*加法和減法*/巢狀（nesting）color: $red - #101
font-size: $fontsize + 10px
sass有兩種巢狀規則：
選擇器巢狀
選擇器巢狀是sass巢狀規則中的第一種。
sass的巢狀類似於你的html巢狀：
$fontsize: 12px如果你看了sass生成的css，你可以看到「.name」巢狀在「.speaker」內，這裡生成的css選擇器是「.speaker .name」。.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
.speaker .name屬性巢狀.speaker .position
屬性巢狀是sass巢狀的第二種
相同字首的屬性，你可以進行巢狀：
$fontsize: 12px在上面的例子中，我們有乙個「font:」，在新的一行增加兩個空格放置他的屬性（通常我們看到的是使用連字元「-」來連線）。.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
因此我們先寫「font:」屬性，然後斷行空兩格，寫「weight:」屬性，在css中就變成了「font-weight:」屬性。
.speaker .name所有連字元的選擇器都支援。.speaker .position
這種巢狀用來組織你的css結構是非常棒的，可以讓你不在寫一些重複的**。
混合（mixins）
混合是sass中另乙個很優秀的特性。混合可以讓你定義一整塊的sass**，甚至你可以給他們定義引數，更酷的是你還可以設定預設值。
來看乙個簡單的例子：
@mixin border-radius($amount: 5px)上面的sass**將轉譯成下面的css**：-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h1 @include border-radius(2px)
.speaker
@include border-radius
h1我們給「h1」元素指定了乙個特定的圓角值，但是並沒有給「.speaker」指定任何值，因此他將使用的是預設值「5px」。.speaker
選擇器繼承
選擇器的繼承可以讓你的選擇器繼承另乙個選擇器的所有樣式風格，這是乙個非常優秀的特性。
h1上面的sass**將轉譯成下面的css**：border: 4px solid #ff9aa9
.speaker
@extend h1
border-width: 2px
h1,嘗試sass.speaker
.speaker
網上嘗試
如果你的本地電腦沒有安裝sass，你可以在網上嘗試使用。
在轉譯之前，你需要選擇底部的「indented syntax」選項。
安裝
sass是乙個ruby gem。如果你的本地已經安裝了ruby gems，那麼可以在你命令終端直接執行：
gem install sasssass也可以使用命令列工具將sass檔案轉譯成css檔案。
你可以鍵入「sass --watch sass_folder:stylesheets_folder」，這個時候你的sass檔案（副檔名必須是.sass）stylesheets_folder就會把轉譯的樣式檔案儲存在「sass_folder」目錄，當然你的sass檔案必須儲存在這個檔案目錄中。「--watch」選項的意思就是將這個目錄中的sass檔案轉譯成樣式檔案。
css轉換成sass
在現有的專案中通過「sass-convert」使用sass。
在終端進入你的目錄中，鍵入「sass-convert --from css --to sass -r .」。將css轉換成sass。其中「-r」表示遞迴，「.」表示當前目錄。
scss
在這裡我們只介紹了sass的語法，然後還有乙個新的名稱叫scss或者sassy css。不同的是scss看起來更像css，但他也像sass一樣具有變數、混合、巢狀和選擇器繼承等特性。
總結在你組織和管理css時，sass真的很優秀。還有個專案compass,它在css框架中使用混合模式，而不是去修改你的html結構或者重新定義你的類名。
sass簡單入門學習
安裝ruby的時候記得勾選add ruby executables to your path，直到 ruby 安裝程式完成 ruby 安裝為止。如果您的安裝沒有適當地配置環境變數，接下來您可能需要進行環境變數的配置。安裝完ruby之後,cmd終端執行,ruby v 如果有版本號就說明安裝成功了。之後...
Sass學習筆記
安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...
Sass學習筆記
1.全域性變數p background color color red span div2.default 第二種，使用前面定義的值 color red 變數申明帶有 default，但是前面還有這個變數的申明 color blue default p3.變數用 包裹 btnclass btn de...