sass學習篇

嘀嗒嘀嗒嘀發表於2018-04-04

什麼是sass?

1.Sass 官網上是這樣描述 Sass 的:

Sass 是一門高於 CSS 的元語言,它能用來清晰地、結構化地描述檔案樣式,有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法,同時提供多種功能來建立可維護和管理的樣式表。
複製程式碼
  1. Sass 前世今生:
Sass 是最早的 CSS 預處理語言,有比 LESS 更為強大的功能,不過其一開始的縮排式語法(Sass 老版本語法,後面課程會詳細介紹 )並不能被大眾接受,不過由於其強大的功能和 Ruby on Rails 的大力推動,還是有很多開發者選擇了 Sass。

Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言,它誕生於2007年,是最大的成熟的 CSS 預處理語言。最初它是為了配合 HAML(一種縮排式 HTML 預編譯器)而設計的,因此有著和 HTML 一樣的縮排式風格。

為什麼早期不如 LESS 普及?

雖然縮排式風格可以有效縮減程式碼量,強制規範編碼風格,但它一方面並不為大多數程式接受,另一方面無法相容已有的 CSS 程式碼。這也是 Sass 雖然出現得最早,但遠不如 LESS 普及的原因。
複製程式碼

3.Sass 和 SCSS 有什麼區別?

Sass 和 SCSS 其實是同一種東西,我們平時都稱之為 Sass,兩者之間不同之處有以下兩點:

3.1 副檔名不同,Sass 是以“.sass”字尾為副檔名,而 SCSS 是以“.scss”字尾為副檔名
3.2 語法書寫方式不同,Sass 是以嚴格的縮排式語法規則來書寫,不帶大括號({})和分號(;),而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例:
複製程式碼

Sass 語法

$font-stack: Helvetica, sans-serif  //定義變數
$primary-color: #333 //定義變數

body
  font: 100% $font-stack
  color: $primary-color
複製程式碼

SCSS 語法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
複製程式碼

編譯出來的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
複製程式碼
  1. Sass 和 CSS 寫法有差別:

    4.1 Sass 和 CSS 寫法的確存在一定的差異,由於 Sass 是基於 Ruby 寫出來,所以其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號和分號,其主要是依靠嚴格的縮排方式來控制的。如:

Sass寫法:

body
  color: #fff
  background: #f36
複製程式碼

而在 CSS 我們是這樣書寫:

body{
  color:#fff;
  background:#f36;
}
複製程式碼

4.2 SCSS 和 CSS 寫法無差別:

SCSS 和 CSS 寫法無差別,這也是 Sass 後來越來越受大眾喜歡原因之一。 簡單點說,把你現有的“.css”檔案直接修改成“.scss”即可使用。

sass 安裝

mac下安裝

第一步:安裝Ruby

不確定是否安裝,可以使用下面命令檢視

ruby -v
複製程式碼

window下可以採用RubyInstaller 來安裝 Ruby 環境,這是它的網址:(選擇版本根據它給的提示 操作就可以)

https://rubyinstaller.org/downloads/
複製程式碼

第二步:安裝sass

sudo gem install sass
複製程式碼

window下安裝

gem install sass
複製程式碼

如果被網路強掉,就在sass官網把它下載到本地,拖到install後面,即下面如視:

sudo gem insatll /a/b/c/sass-3.4.13-gem(本地下載路徑)    
複製程式碼

確認是否安裝成功

sass -v
複製程式碼

更新

 sudo gem update sass
複製程式碼

window下更新

gem install sass   
複製程式碼

解除安裝

sudo gem uninstall sass
複製程式碼

window下解除安裝

 gem uninstall sass 
複製程式碼

sass編譯

命令編譯是指使用你電腦中的命令終端,通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入:

單檔案編譯:

sass <要編譯的Sass檔案路徑>/style.scss:<要輸出CSS檔案路徑>/style.css
複製程式碼

這是對一個單檔案進行編譯,如果想對整個專案所有 Sass 檔案編譯成 CSS 檔案,可以這樣操作:

多檔案編譯:

sass sass/:css/-------目前我得編譯是有問題的,還沒解決,如果已經解決的小可愛可以告訴我呀
複製程式碼

上面的命令表示將專案中“sass”資料夾中所有“.scss”(“.sass”)檔案編譯成“.css”檔案,並且將這些 CSS 檔案都放在專案中“css”資料夾中。

缺點及解決方法:

在實際編譯過程中,你會發現上面的命令,只能一次性編譯。每次個性儲存“.scss”檔案之後,都得重新執行一次這樣的命令。如此操作太麻煩,其實還有一種方法,就是在編譯 Sass 時,開啟“watch”功能,這樣只要你的程式碼進行任保修改,都能自動監測到程式碼的變化,並且給你直接編譯出來:

sass --watch <要編譯的Sass檔案路徑>/style.scss:<要輸出CSS檔案路徑>/style.css
複製程式碼

Sass 語法格式

這裡說的 Sass 語法是 Sass 的最初語法格式,他是通過 tab 鍵控制縮排的一種語法規則,而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 Sass 老版本,其檔名以“.sass”為副檔名。 來看一個 Sass 語法格式的簡單示例。假設我們有一段這樣的 CSS 程式碼:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
複製程式碼

現在用 Sass 的語法格式來編寫:

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
複製程式碼

在整個 Sass 程式碼中,我們沒看到類似 CSS 中的大括號和分號。 注:這種語法格式對於前端人員都不太容易接受,而且容易出錯。

二、SCSS語法格式

SCSS 是 Sass 的新語法格式,從外形上來判斷他和 CSS 長得幾乎是一模一樣,程式碼都包裹在一對大括號裡,並且末尾結束處都有一個分號。其檔名格式常常以“.scss”為副檔名。

同樣的這段 CSS 程式碼:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
複製程式碼

我們使用 SCSS 語法格式將按下面這樣來書寫:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
複製程式碼

這樣的語法格式對於從事前端工作的同學來說更易於接受,這也是 SCSS 為什麼更被前端人員青眯的原因。

不管是 Sass 的語法格式還是 SCSS 的語法格式,他們的功能都是一樣的,不同的是其書寫格式和副檔名不同,來看一個簡單的對比圖:

正因為如此,有不少同學使用Sass新的語法規則,而副檔名依舊使用的是“.sass”,這也就造成血案了, 編譯時說編譯不出來。在此特別提醒新同學:“.sass”只能使用 Sass 老語法規則(縮排規則),“.scss” 使用的是 Sass 的新語法規則,也就是 SCSS 語法規則(類似 CSS 語法格式)。

---------------------------------------以上文章內容參考自慕課網sass初級篇,如有錯誤,請指正
複製程式碼

相關文章