sass入門指南

很詳細的sass入門指南，學習一下。原文sass入門指南

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

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

1. sass並非css的替代品，它只是讓css變得更加高效、可維護
2. 永遠不要去修改生成後的css
3. 部署到線上的是生成的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