什麼是Sass
Sass是對 CSS 的擴展，讓 CSS 語言更強大、優雅。它允許你使用變量、嵌套規則、mixins、導入等眾多功能，並且完全兼容 CSS 語法。Sass 有助於保持大型樣式表結構良好，同時也讓你能夠快速開始小型項目，特別是在搭配Compass 樣式庫一同使用時。
它有什麼特色
- 完全兼容 CSS3
- 在 CSS 語言基礎上添加了擴展功能，比如變量、嵌套 (nesting)、混合 (mixin)
- 對顏色和其它值進行操作的{Sass::Script::Functions 函數}
- 函數庫控制指令之類的高級功能
- 良好的格式，可對輸出格式進行定製
- 支持 Firebug
兩種擴展名
第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本。這種語種語法的樣式表文件需要以 .scss 擴展名。
第二種比較老的語法成為縮排語法（或者就稱為 "Sass"），提供了一種更簡潔的 CSS 書寫方式。它不使用花括號，而是通過縮排的方式來表達選擇符的嵌套層級，而且也不使用分號，而是用換行符來分隔屬性。很多人認為這種格式比 SCSS 更容易閱讀，書寫也更快速。縮排語法具有 Sass 的所有特色功能，雖然有些語法上稍有差異。使用此種語法的樣式表文件需要以 .sass 作為擴展名。
變量
sass中可以定義變量，方便統一修改和維護。
//sass style
//-----------------------------------
body {
font-family: $fontStack;
color: $primaryColor;
}
//css style
//-----------------------------------
body {
font-family: Helvetica, sans-serif;
color: #333;
}
嵌套
sass可以進行選擇器的嵌套，表示層級關係，看起來很優雅整齊。
//sass style
//-----------------------------------
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//css style
//-----------------------------------
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
導入
sass中如導入其他sass文件，最後編譯為一個css文件，優於純css的@import
//sass style
//-----------------------------------
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
//sass style
//-----------------------------------
// base.scss
@import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}
//css style
//-----------------------------------
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
font-size: 100% Helvetica, sans-serif;
}
mixin
sass中可用mixin定義一些代碼片段，且可傳參數，方便日後根據需求調用。從此處理css3的前綴兼容輕鬆便捷。
//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
擴展/繼承
sass可通過@extend來實現代碼組合聲明，使代碼更加優越簡潔。
//sass style
//-----------------------------------
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
//sass style
//-----------------------------------
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
//css style
//-----------------------------------
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
運算
sass可進行簡單的加減乘除運算等
//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
顏色
sass中集成了大量的顏色函數，讓變換顏色更加簡單。
//sass style
//-----------------------------------
$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
//css style
//-----------------------------------
a {
text-decoration: none;
color: #0088cc;
}
a:hover {
color: #006699;
}
命令行編譯
單文件轉換命令
sass style.scss style.css
單文件監聽命令
sass --watch style.scss:style.css
文件夾監聽命令
sass --watch sassFileDirectory:cssFileDirectory
css文件轉成sass/scss文件（在線轉換工具css2sass）
sass-convert style.css style.sass
sass-convert style.css style.scss
sass框架tobe
無TOBE，不SASS！！！
Tobe是一個寫給面向熟悉sass人員使用的框架，以sassCore為核心，所有的組件都單獨開發，根據實際需求來調用，避免了臃腫的雜亂代碼。由於有著sass的優良基因，tobe的代碼更加靈活可控，如果你是一個有著代碼潔癖的人，那麼tobe的精彩一定不可錯過。
tobe使用方法：http://tobe.w3cplus.com/example/begin/begin.html
經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公眾號——全棧弄潮兒。
閱讀更多 全棧弄潮兒 的文章
