SASS&Compass語法學習

之前已經瞭解了sass和compass，但是都只看了皮毛，今天要深入看看他們的用法，在以後的專案中使用起來。

Sass的使用

來源：SASS中文網

變數

Sass使用 ： $color: #666; 的方式定義變數

變數名可以用中劃線和下劃線進行分隔，並且互相相容，即 $link-color 和 $link_color 一樣並且可以混用。但是中劃線更為普遍，compass也使用中劃線。

巢狀CSS規則

css中需要重複寫選擇器的，在sass中直接巢狀即可：

//css
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
//sass
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

這裡要注意，當使用偽類的時候，要使用父選擇器&，編譯的時候&會替換父元素
這裡如果沒有&，將會報錯。

//sass
article a {
  color: blue;
  &:hover { color: red }
}
//css
article a { color: blue }
article a:hover { color: red }

子組合選擇器和同層組合選擇器：> + ~

>

//article下的所有section
article section { margin: 5px }
//article下緊跟著的子元素中section
article > section { border: 1px solid #ccc }

+

//選擇header和其後緊跟的p元素
header + p { font-size: 1.1em }

~

//選擇所有跟在article後的同層article元素，不管它們之間隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }

屬性巢狀

//sass
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//CSS
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

匯入SASS檔案

css有一個特別不常用的特性，即@import規則，它允許在一個css檔案中匯入其他css檔案。然而，後果是隻有執行到@import時，瀏覽器才會去下載其他css檔案，這導致頁面載入起來特別慢。
sass也有一個@import規則，但不同的是，sass的@import規則在生成css檔案時就把相關檔案匯入進來。這意味著所有相關的樣式被歸納到了同一個css檔案中，而無需發起額外的下載請求。另外，所有在被匯入檔案中定義的變數和混合器均可在匯入檔案中使用。

使用@import "colors"; 就可以匯入colors.scss檔案。

通常，有些sass檔案用於匯入，你並不希望為每個這樣的檔案單獨地生成一個css檔案。對此，sass用一個特殊的約定來解決：
此約定即，sass區域性檔案的檔名以下劃線開頭

這樣，區域性檔案命名使用下劃線_開頭，編譯的時候就不會編譯區域性檔案，其他sass檔案引用區域性sass檔案時，檔名也可以省略下劃線。

實際上這也就是把css模組化了。

靜默註釋

body {
  color: #333; // 這種註釋內容不會出現在生成的css檔案中
  padding: 0; /* 這種註釋內容會出現在生成的css檔案中 */
}

混合器

混合器使用 @mixin 識別符號定義，使用 @include 識別符號來使用。

我的理解是，混合器相當於css的函式，把常用的樣式封裝在一個混合器裡邊，需要的時候直接@include進行呼叫即可。

混合器中的css規則

混合器中還可以使用sass的巢狀：

//混合器
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
//sass
ul.plain {
  color: #444;
  @include no-bullets;
}
//css
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

另外還可以給混合器傳遞引數：

//混合器傳參
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//穿多個引數的混合器使用時，可能會忘記引數的順序和意思。sass允許使用
$name:value   //這樣的形式傳參，這樣引數就不用在乎順序了。

另外可以設定引數預設值，例如：

@mixin link-colors($normal,$hover: $normal, $visited: $normal) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

當使用@include link-colors(red)的時候，hover和

visited也會被自動賦值為red。

使用選擇器繼承來精簡css

選擇器繼承是說：一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend 語法實現：

//通過選擇器繼承繼承樣式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上邊程式碼中，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class=”seriousError” 修飾的html元素最終的展示效果就好像是class=”seriousError error”。

.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，如下程式碼:

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}

任何css規則都可以繼承其他規則，幾乎任何css規則也都可以被繼承。

Compass用法指南

來源：阮一峰大神的部落格

Compass是Sass的一個工具庫，使用它能夠更方便的使用sass。就像是javascript和jquery的關係一樣。

compass的安裝就不說了，之前的部落格中已經有了。在gulp中也有compass模組，很好用。

Compass的模組

Compass採用模組結構，不同模組提供不同的功能。目前，它內建五個模組：

　 * reset 重置
　 * css3 css3功能
　　* layout 佈局
　　* typography 版式
　　* utilities 其他功能

看了上邊的sass語法之後可以發現，其實compass就是一些幫你寫好的sass模組。使用的時候就用sass的@import 來引入模組，如@import “compass/reset”; 。 還有的模組中放著幫你寫好的混合器mixin，使用的時候要縣引入模組，再@include + 混合器名 就可以了。

compass的混合器還會自動幫你加上瀏覽器相容字首。

reset模組

@import "compass/reset";

這樣一句話就可以生成css的reset程式碼了。

CSS3模組

目前該模組提供21種命令，常用的如下：

//引入css3模組
@import "compass/css3";

//圓角
.rounded {
　　　　@include border-radius(5px);
　　　　//只讓左上角為圓角
　　　　@include border-corner-radius(top, left, 5px);
　　}
//透明度
#opacity {
　　　　@include opacity(0.5); 
　　}
//行內區塊
#inline-block {
　　　　@include inline-block;
　　}

layout模組

比如，指定頁面的footer部分總是出現在瀏覽器最底端：

@import "compass/layout";
　　#footer {
　　　　@include sticky-footer(54px);
　　}

又比如，指定子元素佔滿父元素的空間：

@import "compass/layout";
　　#stretch-full {
　　　　@include stretch; 
　　}

typography模組

該模組提供版式功能。
比如，指定連結顏色的mixin為：link-colors(normal,

hover, active,

@import "compass/typography";
　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

utilities模組

其他功能：
比如，清除浮動：

　import "compass/utilities/";
　　.clearfix {
　　　　@include clearfix;
　　}

Helper函式

除了模組，Compass還提供一系列函式。
有些函式非常有用，比如image-width()和image-height()返回圖片的寬和高。
再比如，inline-image()可以將圖片轉為data協議的資料。

函式與mixin的主要區別是，不需要使用@include命令，可以直接呼叫。