一纱皆、什么是 Sass ？
Sass 是一門高于 css 的元語言（什么是元語言）绽昼，它能用來清晰地唯鸭、結(jié)構(gòu)化地描述文件樣式，有著比普通 css 更加強大的功能硅确。
二目溉、Sass 和 Scss 的區(qū)別
相同點：
- sass 和 scss 都是同一種元語言，只不過我們平時都稱之為 Sass菱农。
不同點：
- 文件擴展名不同缭付。Sass 是以".sass"后綴作為擴展名；而 Scss 是以".scss"后綴作為擴展名大莫。
- 語法書寫格式不同蛉腌。Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來寫，不帶大括號"{}"和分號";"；而 Scss 和我們的 css 語法書寫格式非常類似烙丛，帶大括號"{}"和分號";"舅巷。
三、Sass 安裝
- windows 平臺
windows 平臺下安裝 Sass 需要檢查該平臺是否安裝了 Ruby（什么是 Ruby ）河咽，怎么檢查自己的平臺有沒有安裝 Ruby钠右？在命令行終端輸入以下命令即可。
ruby -v
如果出現(xiàn)上面信息就表明你的平臺已經(jīng)安裝 Ruby 了忘蟹，如果沒有出現(xiàn)以上信息可以去 Ruby的官網(wǎng)下載對應(yīng)的 Ruby 版本飒房。
安裝過程中選擇第二個選項，將 Ruby 可執(zhí)行文件添加到 PATH 系統(tǒng)環(huán)境中媚值。
安裝好 Ruby 之后狠毯，就可以安裝 Sass 了。打開電腦的命令行終端褥芒，輸入下面的命令：
gem install sass
檢測 Sass 是否安裝成功及如何更新 Sass
檢測命令：
sass -v
如果在你的命令行終端看到以上類似信息就表示你的平臺 Sass 安裝成功了嚼松。
更新 Sass
更新命令：
gem update sass
同樣，看到以上信息锰扶，表示 Sass 已經(jīng)更新到最新版献酗。
四、語法格式
我們以下面這段 css 代碼作為例子坷牛，比較 Sass 語法格式和 Scss 語法格式的不同
body {
background-color: #CCCCCC;
font-family: sans-serif;
}
- Sass 語法格式
$background-color: #CCCCCC
$font-family: sans-serif
body
background-color: #CCCCCC
font-family: sans-serif
注：這種語法格式對于前端人員不太容易接受罕偎，容易出錯。
- Scss 語法格式
$background-color: #CCCCCC
$font-family: sans-serif
body {
background-color: #CCCCCC;
font-family: sans-serif;
}
注：Scss 是 Sass 的新語法格式京闰，這種語法格式對于前端人員比較容易接受颜及。
五、Sass 編譯
Sass 編譯有以下幾種編譯方法：
-
命令編譯
定義：命令編譯是指使用命令行終端蹂楣，通過輸入 Sass 指令來編譯 Sass器予。這種方式最簡單也最直接。
單文件編譯：sass <要編譯的 Sass 文件路徑>/style.sass:<要輸入的 css 文件路徑>/style.css
多文件編譯：（此操作可以對整個項目所有 Sass 文件編譯成 css 文件）
sass sass/:css/
缺點：
在實際編譯過程中捐迫，上面的命令只能一次性編譯。解決方法：
開啟 "watch" 功能爱葵，這樣只要代碼進(jìn)行修改施戴，都能自動監(jiān)測到代碼的變化，并且直接編譯出來萌丈。sass --watch <要編譯的 Sass 文件路徑>/style.sass:<要輸出的 CSS 文件路徑 >/style.css
例如：
sass --watch
sass/test.scss:css/test.css 自動化編譯（ 如：Grunt 前端自動化工作流 grunt-sass、Gulp 前端自動化工作流 gulp-ruby-sass 等辆雾。）
六肪笋、4種不同 css 風(fēng)格的輸出方式
sass 代碼：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
-
嵌套輸出方式 nested
編譯時帶上參數(shù) "--style nested"：sass --watch test.scss:test.css --style nested
編譯出來的 css 樣式風(fēng)格：
nav ul { margin: 0; padding: 0; list-style: none;} nav li { display: inline-block; } -
展開輸出方式 expanded
編譯時帶上參數(shù) "--style expanded"：sass --watch test.scss:test.css --style expanded
編譯出來的 css 樣式風(fēng)格（大括號另起一行）：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } -
緊湊輸出方式 compact
編譯時帶上參數(shù) "--style compact"：sass --watch test.scss:test.css --style compact
編譯出來的 css 樣式風(fēng)格（單行風(fēng)格）：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } -
壓縮輸出方式 compressed
編譯時帶上參數(shù) "--style compressed"：sass --watch test.scss:test.css --style compressed
編譯出來的 css 樣式風(fēng)格（去掉標(biāo)準(zhǔn)的 sass 和 css 注釋和空格）：
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}
只有強者才懂得斗爭；弱者甚至失敗都不夠資格，而是生來就是被征服的藤乙。
希望此文章能夠幫助你猜揪。
歡迎關(guān)注我的博客網(wǎng)站。
咱們坛梁，下一篇見而姐！
