原文在 https://github.com/zhongxia245/blog , 歡迎 star！

Sass入門指南

時間：2016-09-24 22:56:12
作者：zhongxia
這里就不講解Sass的安裝以及語法了，因為參考文章中，阮一峰老師寫的很詳細，另外一篇也寫的很不錯，直接學習即可。 這里主要寫下自己的看法，或者不懂的地方。

常規的CSS是不支持變量，函數，以及一些簡單的判斷，計算等。只有單純的描述，如果多個地方使用同一個顏色，或者字體大小，要修改起來比較麻煩。

因此，就有人給CSS加入了一些編程元素，這被叫做 "CSS預處理器"（css preprocessor）

常見的 CSS預處理器，有Less， Sass , Stylus

強調

摘自《sass入門指南》

• sass不是css的替代品，它只是讓css變得更加高效、可維護
• 永遠不要修改生成后的css
• 部署到線上的是生成的css文件，不是sass文件

sass的工作流如下圖

Sass文件格式

Sass 有兩種文件格式

.sass文件

.sass文件是縮進式的寫法，對格式要求比較嚴謹，末尾不能有分號, 屬性和值之間有一個空格

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

.scss文件

.scss文件 和 css 一致

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

Sass 的 import 導入功能

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

但是 sass中，使用 import則可以規避這個問題， 因為sass最終會生成一個CSS文件，在生成的時候，會把導入的CSS 給合并到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;
}

參考文章

1. SASS用法指南
2. sass入門指南