Sass入門篇 —— 學習筆記（一）

摘要： 一、什麼是 Sass ？ Sass 是一門高於 css 的元語言（什麼是 元語言 ），它能用來清晰地、結構化地描述檔案樣式，有著比普通 css 更加強大的功能。 二、Sass 和 Scss 的區別 相同點： sass 和 scss 都是同一種元語言，只不過我們平時都...

一、什麼是 Sass ？

Sass 是一門高於 css 的元語言（什麼是 ofollow,noindex">元語言 ），它能用來清晰地、結構化地描述檔案樣式，有著比普通 css 更加強大的功能。

二、Sass 和 Scss 的區別

相同點：

1. sass 和 scss 都是同一種元語言，只不過我們平時都稱之為 Sass。

不同點：

1. 副檔名不同。Sass 是以" .sass "字尾作為副檔名；而 Scss 是以" .scss "字尾作為副檔名。
2. 語法書寫格式不同。Sass 是以嚴格的縮排式語法規則來寫，不帶大括號" {} "和分號" ; "；而 Scss 和我們的 css 語法書寫格式非常類似，帶大括號" {} "和分號" ; "。

三、Sass 安裝

• windows 平臺

  windows 平臺下安裝 Sass 需要檢查該平臺是否安裝了 Ruby（什麼是 Ruby ），怎麼檢查自己的平臺有沒有安裝 Ruby？在命令列終端輸入以下命令即可。

ruby -v

如果出現上面資訊就表明你的平臺已經安裝 Ruby 了，如果沒有出現以上資訊可以去 Ruby的官網 下載對應的 Ruby 版本。

安裝過程中選擇第二個選項，將 Ruby 可執行檔案新增到 PATH 系統環境中。

安裝 Ruby

安裝好 Ruby 之後，就可以安裝 Sass 了。開啟電腦的命令列終端，輸入下面的命令：

gem install sass

檢測 Sass 是否安裝成功及如何更新 Sass

檢測命令：

sass -v

如果在你的命令列終端看到以上類似資訊就表示你的平臺 Sass 安裝成功了。

更新 Sass

更新命令：

gem update sass

同樣，看到以上資訊，表示 Sass 已經更新到最新版。

四、語法格式

我們以下面這段 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" 功能，這樣只要程式碼進行修改，都能自動監測到程式碼的變化，並且直接編譯出來。

  sass --watch <要編譯的 Sass 檔案路徑>/style.sass:<要輸出的 CSS 檔案路徑 >/style.css

  例如：

  sass --watchsass/test.scss:css/test.css
  

• GUI工具編譯（ 如：編譯軟體 koala 、編譯軟體 codekit ）

• 自動化編譯（ 如：Grunt 前端自動化工作流 grunt-sass 、Gulp 前端自動化工作流 gulp-ruby-sass 等。）

六、4種不同 css 風格的輸出方式

sass 程式碼：

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li {display: inline-block;}
}

1. 巢狀輸出方式 nested

   編譯時帶上引數 " --style nested "：

   sass --watch test.scss:test.css --style nested
   

   編譯出來的 css 樣式風格：

   nav ul {
   margin: 0;
   padding: 0;
   list-style: none;}
   nav li {
   display: inline-block;}

2. 展開輸出方式 expanded

   編譯時帶上引數 " --style expanded "：

   sass --watch test.scss:test.css --style expanded
   

   編譯出來的 css 樣式風格（大括號另起一行）：

   nav ul {
   margin: 0;
   padding: 0;
   list-style: none;
   }
   nav li {
   display: inline-block;
   }

3. 緊湊輸出方式 compact

   編譯時帶上引數 " --style compact "：

   sass --watch test.scss:test.css --style compact
   

   編譯出來的 css 樣式風格（單行風格）：

   nav ul {margin: 0; padding: 0; list-style: none;}
   nav li {display: inline-block;}

4. 壓縮輸出方式 compressed

   編譯時帶上引數 " --style compressed "：

   sass --watch test.scss:test.css --style compressed
   

   編譯出來的 css 樣式風格（去掉標準的 sass 和 css 註釋和空格）：

   nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}

只有強者才懂得鬥爭；弱者甚至失敗都不夠資格，而是生來就是被征服的。

希望此文章能夠幫助你。

歡迎關注 我的部落格 網站。

咱們，下一篇見！