前端利器：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/zhX31Xcn/ 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;
　　}

就寫到這吧，其餘特性慢慢探討吧！