CSS預處理器之sass的用法

學過css的確定知道層疊樣式表 (Cascading Style Sheets，縮寫爲 CSS），是一種樣式表語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。

CSS 是開放網絡的核心語言之一，由 W3C規範 實現跨瀏覽器的標準化。CSS節省了大量的工做。 樣式能夠經過定義保存在外部.css文件中，同時控制多個網頁的佈局，這意味着開發者沒必要經歷在全部網頁上編輯佈局的麻煩。CSS 被分爲不一樣等級：CSS1 現已廢棄， CSS2.1 是推薦標準， CSS3 分紅多個小模塊且正在標準化中。

時代在發展，人類在進步，有人就開始爲 CSS加入編程元素，這被叫作CSS預處理器， CSS 預處理器是一個能讓你經過預處理器本身獨有的語法來生成CSS的程序。市面上有不少CSS預處理器可供選擇，且絕大多數CSS預處理器會增長一些原生CSS不具有的特性，例如 代碼混合， 嵌套選擇器， 繼承選擇器等。這些特性讓CSS的結構更加具備可讀性且易於維護。

要使用CSS預處理器，你必須在web服務中服務器安裝CSS編譯工具。

這裏是一些最流行的CSS預處理器：

• Sass
• LESS
• Stylus
• PostCSS

各類"CSS預處理器"之中，我本身最喜歡SASS，以爲它有不少優勢，打算之後都用它來寫CSS。下面是我整理的用法總結，供本身開發時參考，相信對其餘人也有用。

首先，讓咱們放一張圖來看看今天的主角：

看到了嗎，世界上 最成熟、最穩定、最強大的專業級CSS擴展語言！這麼裝逼的話，必定是有它的道理的~ 繼續往下，一塊兒來看看吧！

1、什麼是SASS

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目。

本文介紹了SASS的主要用法,用以平常使用。若是沒法解決你的需求，能夠查看官方文檔。

2、安裝Sass和Compass

2.1 安裝

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

可是二者的語法沒有關係。不懂Ruby，照樣使用。

假定你已經安裝好了Ruby，Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

// 安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)
gem install sass
gem install compass
複製代碼

而後，就可使用了。

2.2 編譯Sass

sass編譯有不少種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工做流grunt-sass、Gulp打造前端自動化工做流gulp-ruby-sass等。

下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲input.scss。）

// 單文件轉換命令
sass input.scss output.css
複製代碼

命令行編譯配置選項: 命令行編譯sass有配置選項，如編譯事後css排版、生成調試map、開啓debug信息等，可經過使用命令sass -v查看詳細。咱們通常經常使用兩種--style、--sourcemap。

//編譯格式
sass --watch input.scss:output.css --style compact

//編譯添加調試map
sass --watch input.scss:output.css --sourcemap

//選擇編譯格式並添加調試map
sass --watch input.scss:output.css --style expanded --sourcemap

//開啓debug信息
sass --watch input.scss:output.css --debug-info
複製代碼

• --style表示解析後的css是什麼排版格式;
• --sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。

SASS提供四個編譯風格的選項：

• nested：嵌套縮進的css代碼，它是默認值。
• expanded：沒有縮進的、擴展的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

四種編譯排版演示:

//未編譯樣式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}
複製代碼

nested 編譯排版格式

/*命令行內容*/
sass style.scss:style.css --style nested

/*編譯事後樣式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }
複製代碼

expanded 編譯排版格式

/*命令行內容*/
sass style.scss:style.css --style expanded

/*編譯事後樣式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
複製代碼

compact 編譯排版格式

/*命令行內容*/
sass style.scss:style.css --style compact

/*編譯事後樣式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
複製代碼

compressed 編譯排版格式

/*命令行內容*/
sass style.scss:style.css --style compressed

/*編譯事後樣式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
複製代碼

生產環境當中，通常使用最後一個選項。

sass --style compressed test.sass test.css
複製代碼

你也可讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

//單文件監聽命令
sass --watch input.scss:output.css

//若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄：
sass --watch app/sass:public/stylesheets
複製代碼

SASS的官方網站，提供了一個在線轉換器。你能夠在那裏，試運行下面的各類例子也能夠去（Sass中文文檔）試試。

3、基本用法

3.1 變量

sass使用$符號來標識變量(老版本的sass使用!來標識變量。改爲$是多半由於!highlight-color看起來太醜了。)，好比$highlight-color和$sidebar-width。爲何選擇$ 符號呢？由於它好認、更具美感，且在CSS中並沒有他用，不會致使與現存或將來的css語法衝突。

sass變量的聲明和css屬性的聲明很像：

$highlight-color: #F90;
複製代碼

這意味着變量$highlight-color如今的值是#F90。任何能夠用做css屬性值的賦值都 能夠用做sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。這時變 量尚未生效，除非你引用這個變量——咱們很快就會了解如何引用。

$color : #1875e7; 

div {
    color : $color;
}
複製代碼

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

$side : left;

.rounded {
    border-#{$side}-radius: 5px;
}
複製代碼

3.2 計算

$var: 10px;
div {
    margin: (28px/2);
    position: absolute;
    top: 30px + 20px;
    left: $var + 20px;
}
複製代碼

3.3 嵌套CSS 規則

在Sass中，你能夠像俄羅斯套娃那樣在規則塊中嵌套規則塊。sass在輸出css時會幫你把這些嵌套規則處理好，避免你的重複書寫。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
複製代碼

/* 編譯後 */
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };
複製代碼

屬性也能夠嵌套，好比border-color屬性，能夠寫成：

p {
    border: {
        color: blue
    }
}
複製代碼

注意，border後面必須加上冒號。

在使用嵌套規則時，父選擇器能對於嵌套規則如何解開提供更好的控制。它就是一個簡單的&符號，且能夠放在任何一個選擇器可出現的地方。

article a {
  color: blue;
  &:hover { color: red }
}
複製代碼

在爲父級選擇器添加:hover等僞類時，這種方式很是有用。同時父選擇器標識符還有另一種用法，你能夠在父選擇器以前添加選擇器。舉例來講，當用戶在使用IE瀏覽器時，你會經過JavaScript在<body>標籤上添加一個ie的類名，爲這種狀況編寫特殊的樣式以下：

#content aside {
  color: red;
  body.ie & { color: green }
}
複製代碼

3.4 靜默註釋

css中註釋的做用包括幫助你組織樣式、之後你看本身的代碼時明白爲何這樣寫，以及簡單的樣式說明。可是，你並不但願每一個瀏覽網站源碼的人都能看到全部註釋。

sass另外提供了一種不一樣於css標準註釋格式/* ... */的註釋語法，即靜默註釋，其內容不會出如今生成的css文件中。靜默註釋的語法跟JavaScript、Java等類C的語言中單行註釋的語法相同，它們以//開頭，註釋內容直到行末。

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
}
複製代碼

實際上，css的標準註釋格式/* ... */內的註釋內容亦可在生成的css文件中抹去。當註釋出如今原生css不容許的地方，如在css屬性或選擇器中，sass將不知如何將其生成到對應css文件中的相應位置，因而這些註釋被抹掉。

body {
  color /* 這塊註釋內容不會出如今生成的css中 */: #333;
  padding:  /* 這塊註釋內容也不會出如今生成的css中 */ 0;
}
複製代碼

4、代碼的重用

4.1 繼承

使用sass的時候，最後一個減小重複的主要特性就是選擇器繼承。基於Nicole Sullivan面向對象的css的理念，選擇器繼承是說一個選擇器能夠繼承爲另外一個選擇器定義的全部樣式。這個經過@extend語法實現，以下代碼:

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

4.2 混合器

混合器使用@mixin標識符定義。Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。

下邊的這段sass代碼，定義了一個很是簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
複製代碼

而後就能夠在你的樣式表中經過@include來使用這個混合器，放在你但願的任何地方。@include調用會把混合器中的全部樣式提取出來放在@include被調用的地方。

div {
    @include rounded-corners;
}
複製代碼

mixin的強大之處，在於能夠指定參數和缺省值。

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}
/* 使用的時候，根據須要加入參數 */
div {
    @include left(20px)
}
複製代碼

4.3 導入文件

@import命令，用來插入外部文件。

@import "path/input.scss";
複製代碼

若是插入的是.css文件，則等同於css的import命令。

@import "input.css";
複製代碼

5、高級用法（控制指令）

5.1 條件語句

@if能夠用來判斷，當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
複製代碼

/* 編譯後 */ 
p {
  border: 1px solid;
}
複製代碼

配套的還有@else命令,@if 聲明後面能夠跟多個 @else if 聲明，或者一個 @else 聲明。若是 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，若是所有失敗，最後執行 @else 聲明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
複製代碼

/* 編譯後 */ 
p {
  color: green;
}
複製代碼

5.2 循環語句 @for

@for 指令能夠在限制的範圍內重複輸出格式，每次按要求（變量的值）對輸出結果作出變更。這個指令包含兩種格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外，$var 能夠是任何變量，好比 $i；<start> 和 <end> 必須是整數值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
複製代碼

/* 編譯後 */ 
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}
複製代碼

也支持while循環：

$i: 5;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 2;
}
複製代碼

@each 指令的格式是 $var in <list>, $var 能夠是任何變量名，好比 $length 或者 $name，而 <list> 是一連串的值，也就是值列表:

@each $member in a, b, c, d {
.#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
複製代碼

5.3 自定義函數（函數指令）

Sass 支持自定義函數，並能在任何屬性值或 Sass script 中使用：

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}
複製代碼

與 mixin 相同，也能夠傳遞若干個全局變量給函數做爲參數。一個函數能夠含有多條語句，須要調用 @return 輸出結果。

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
複製代碼

自定義的函數也可使用關鍵詞參數，上面的例子還能夠這樣寫：

#sidebar { width: grid-width($n: 5); }
複製代碼

建議在自定義函數前添加前綴避免命名衝突，其餘人閱讀代碼時也會知道這不是 Sass 或者 CSS 的自帶功能。

自定義函數與 mixin 相同，都支持 variable arguments

參考文獻： CSS 預處理器

參考文獻： Sass中文網

參考文獻： Sass官方文檔