Sass入門指南

轉自：http://www.imooc.com/article/1413

css預處理器已經算不上一個新鮮的詞了，當前比較有表明性的css預處理器有sass、less、stylus。關於三者選擇問題一直都是比較受爭議的話題，這裏就不在討論了，適合的就是最好的。這篇文章主要會介紹一些sass的常見用法，固然不少理論都是相通的。

在介紹sass前，咱們先得明確幾點：

• Sass並非css的替代品，它只是讓css變得更加高效、可維護
• 永遠不要去修改生成後的css
• 部署到線上的是生成的css文件，不是sass文件，sass的工做流以下圖

1、安裝sass

Sass是基於ruby的產物，所以在安裝sass前須要先安裝ruby。(ps: 本機系統環境，win7 64位)

下載地址：https://www.ruby-lang.org/zh_cn/downloads/

下載對應系統的版本，一路next便可。安裝完成後，在命令行輸入ruby -v可查看ruby版本。

$ ruby -v ruby 2.0.0p451 (2014-02-24) [x64-mingw32]

安裝完ruby後，在命令行輸入gem install sass便可安裝sass，安裝完後可經過sass -v來查看sass版本。

$ sass -v Sass 3.3.5 (Maptastic Maple)

2、編譯sass文件

2.1 sass文件格式

sass有兩種可選的文件後綴.sass和.scss，二者的主要區別就是在書寫格式上。

.sass文件是縮進式的寫法，對格式要求比較嚴謹，末尾不能有分號

.test margin: 5px 10px font-size: 14px color: #333

.scss文件的寫法和css一致

.test { margin: 5px 10px; font-size: 14px; color: #333; }

能夠根據我的的書寫習慣來選擇這兩種風格，只要同一個文件中不混用便可。(ps: 文章後面用到的代碼採用的是第二種風格)

2.2 編譯sass

編譯單個文件

sass test.scss test.css

也能夠設置輸出css文件的風格

sass --style compressed test.scss test.css

輸出樣式的風格能夠有四種選擇，默認爲nested

• nested：嵌套縮進的css代碼
• expanded：展開的多行css代碼
• compact：簡潔格式的css代碼
• compressed：壓縮後的css代碼

watch單個文件

sass --watch test.scss:test.css

watch文件夾

sass --watch src:dest

3、sass語法

3.1 變量

普通變量

sass的一個重要特性就是引入了變量。咱們能夠把反覆用到的屬性值或者常常修改的值定義成變量，方便調用和修改。

$base-gap: 10px; $base-color: #333; .test { margin-top: $base-gap; color: $base-color; }

若是在字符串中引用變量，則須要將變量名寫在#{}中。如：

$img-dir: "public/images/"; .test { background-image: url(#{$img-dir}icon.png); }

默認變量

默認變量用來提供sass的默認值。它的含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用默認值。這在書寫sass庫文件時很是有用。設置默認變量的方法也很是簡單，只需在變量值後加上!default便可。

$color: #ccc; $color: #000 !default; p { color: $color; }

多值變量

多值變量相似js中的數組，聲明時只需用空格將多個值隔開便可。如：

$colors: #fff #ccc #999 #666 #333;

咱們能夠經過length($colors)來獲取多值變量的值的個數，經過nth($colors, index)來獲取第index個位置的值。ps: index的取值範圍爲1到length($colors)。

$colors: #fff #ccc #999 #666 #333; p::after { content: "#{length($colors)}"; // 5 color: nth($colors, 1); // #fff }

3.2 嵌套

嵌套是一個比較實用的功能，它不只能夠省去書寫大量重複選擇器的時間，還可以讓代碼顯得更有條理、更易維護。

.list { margin-top: 10; } .list li { padding-left: 15px; } .list a { color: #333; } .list a:hover { text-decoration: none; }

用嵌套改寫

.list { margin-top: 10px; li { padding-left: 15px; } a { color: #333; &:hover { text-decoration: none; } } }

嵌套代碼中的&表示父元素選擇器。嵌套雖然很方便，但不建議嵌套層次太深，以避免生成的css選擇器過長。除了選擇器能夠嵌套外，css屬性也能夠嵌套(用的相對較少)，如：

.test { border: { width: 2px; style: solid; color: #000; } }

3.3 sass導入文件

導入.sass或.scss文件

css有一個不太經常使用的特性，即@import導入功能，它容許在一個css文件中導入其餘css文件。然而，結果是隻有執行到@import規則時，瀏覽器纔會去下載其餘css文件，這會致使頁面樣式加載特別慢，從而容易出現頁面閃的問題。

sass也有@import導入規則，與css不一樣的是，sass中的@import規則會在生成css文件時，把相關的文件導入合併成一個文件，而無需瀏覽器去下載其餘的文件。另外在被導入文件中定義的變量等也能夠在導入文件中正常使用。

在使用@import導入sass文件時，能夠省略sass文件的後綴名.sass或.scss，例如：

- a.scss body { background-color: #f00; } - style.scss @import "a"; div { color: #333; }

編譯後的style.css文件內容以下:

body { background-color: #f00; } div { color: #333; }

若是你是編譯整個sass目錄的話，會發現一個問題，在生成style.css的同時也生成了一個a.css，這個結果並非咱們想要的，a.scss做爲一箇中間文件，通常狀況下是不須要在生成css的。sass開發者也考慮到了這點，咱們只須要在文件名前加上下劃線_，sass編譯的時候就會忽略這個文件，@import引用的時候能夠加下劃線引用，也能夠不加。仍是上面的例子，咱們能夠進行修改：

- _a.scss body { background-color: #f00; } - style.scss @import "a"; div { color: #333; }

這樣一來就只會生成style.css文件，不會再生成多餘的a.css了。

導入css文件

固然，若是你須要像原生css那樣去導入其餘的css文件，也是能夠的，若是符合如下三條中的任意一種狀況，sass就會認爲你想用css原生的@import:

• 被導入的文件名以.css結尾
• 被導入的文件是一個在線的url地址
• 以@import url(...)方式去導入文件

3.4 註釋

sass支持原生css的註釋格式/* 註釋內容 */，同時也支持相似js中的單行註釋// 註釋內容。對於單行註釋，sass會在生成的css文件中刪除單行註釋，只保留css原生的註釋內容，例如：

.test { margin: 10px; // 這塊註釋不會出如今生成的css文件中 color: #333; /* 這塊註釋會出如今生成的css文件中 */ }

固然，若是你把多行註釋寫在原生css不容許的地方時，在編譯生成css文件時，sass會將這些註釋抹掉。例如：

.test { padding /* 這塊註釋不會出如今生成的css文件中 */: 10px margin: 5px /* 這塊註釋也不會出如今生成的css文件中 */ 10px; }

3.5 混合器mixin

簡單混合器

sass中的混合器通常用來解決大段代碼重複的問題。好比咱們常用的單行文本溢出顯示省略號，可使用@mixin來定義一個簡單的混合器：

@mixin ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

而後在須要用到的地方咱們能夠經過@include來使用這個混合器：

.text { @include ellipsis; }

輸出的css爲：

.text { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

帶參數的混合器

混合器不只能夠實現代碼的重複利用，還能夠傳遞參數，根據須要生成不一樣的css。這在跨瀏覽器的css3兼容方面尤其好用。例如：

@mixin radius($value) { -moz-border-radius: $value; -webkit-border-radius: $value; border-radius: $value; }

使用時，咱們只需傳入相應的參數值便可。

.test { @include radius(3px); }

生成的css爲：

.test { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

另外咱們還能夠給參數提供默認值，如：

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

調用時，能夠傳參，也能夠不傳：

.text { @include link-colors; } .error { @include link-colors(red); } a { @include link-colors(blue, green, yellow); }

生成的css爲：

// 鑑於篇幅問題，已將生成的代碼改爲單行 .text { color: #333;} .text:hover { color: #333;} .text:visited { color: #333;} .error { color: red;} .error:hover { color: red;} .error:visited { color: red;} a { color: blue;} a:hover { color: green;} a:visited {color: yellow;}

3.6 繼承extend

使用sass時，繼承是一個很不錯的減小css重複代碼的功能。繼承可讓一個選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。可使用@extend語法來實現繼承。

.text { color: #333; font-size: 14px; margin: 10px 0; } .error { @extend .text; color: #f00; }

上面代碼中，.error繼承了.text中的全部樣式，而且.error和.text中的公共樣式會進行聯合聲明。生成的css爲：

.text, .error { color: #333; font-size: 14px; margin: 10px 0; } .error { color: #f00; }

這種繼承雖然方便，可是也有必定的弊端。好比咱們僅僅想繼承.text類中的樣式，而實際並不須要.text的這個類。換句話說就是咱們的html中並無class="text"這樣的代碼，這樣的話生成的css中的.text其實就是多餘的。

對於這種狀況，sass3.2.0及之後的版本也給咱們提供瞭解決方案：佔位選擇器%。

佔位選擇器%

佔位選擇器的優點在於：聲明以後，若是不調用，則不會產生相似.text的多餘css代碼。佔位選擇器經過%標識來定義，也是經過@extend來調用。

%text { color: #333; font-size: 14px; margin: 10px 0; } .warn { @extend %text; color: #fdd; } .error { @extend %text; color: #f00; }

生成的css爲：

.warn, .error { color: #333; font-size: 14px; margin: 10px 0; } .warn { color: #fdd; } .error { color: #f00; }

這樣就不會再額外生成多餘的樣式了。

3.7 sass條件判斷

@if添加判斷

sass中的@if語句和js中的if很類似。能夠單獨使用，也能夠配合@else使用。

$lte7: true; // 是否支持ie7如下版本 $theme: yellow; .clearfix { @if $lte7 { zoom: 1; } &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } } body { @if $theme == red { background: rgba(255, 0, 0, 0.5); } @else if $theme == yellow { background: rgba(255, 255, 0, 0.5); } @else if $theme == black { background: rgba(0, 0, 0, 0.5); } }

生成css爲：

.clearfix { zoom: 1; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } body { background: rgba(255, 255, 0, 0.5); }

三目運算判斷

三目運算符的語法爲：@if($condition, $condition_true, $condition_false)，例如：

$fontBold: true; .title { font-weight: if($fontBold, bold, normal); }

生成的css爲

.title { font-weight: bold; }

sass相關工具推薦

• sass在線編譯
• sass可視化編譯工具: Koala

文章源自：http://riny.net/2014/sass-guide/

相關課程

1.Sass入門篇

2.Sass和Compass必備技能之Sass篇