CSS
CSS樣式表語言是用來設計網頁外觀的脚步語言，下圖是它與Sass的關係。為什麽會有Sass的誕生呢？主要是考慮了
UX原則的易用性原則，讓樣式表語言的結構更清晰易懂
。
Sass
- 是一個預處理器脚本語言，能把Sass脚本編譯或解譯轉爲一般CSS。
- 是一種樣式表語言，最初由Hampton Catlin設計，由Natalie Weizenbaum開發。
- 提供比CSS更進階的功能，讓工程師更容易使用。
- 提供變數的功能。
- 允許使用@import來引入其他scss檔案。
- 瞭解scss幫助你訂製Bootstrap 4。
- 允許使用槽狀語法。
- 有兩種書寫的語法
- SCSS
- SCSS更類似於CSS樣式，並且必須使用分號和花（大）括號。
- 延伸檔名用.scss。
- SASS
- 對SCSS語法改良，類似Python語法，去掉縮分號和花（大）括號，以縮排代替，使得程式碼更容易閲讀。
- 延伸檔名用.sass。
- 比SCSS獲得更多工程師支持。
使用
- 先安裝Node.js
- 安裝在全域，下指令npm install -g sass
- 查看是否安裝成功，下指令sass -v，輸出：
Ruby Sass 3.5.7
- 建立專案
project\css
project\sass\style.sass
project\index.html
- 轉爲css檔案，下指令sass sass\style.sass:css\style.css
- 監聽sass檔案的修改自動轉出CSS檔，下指令sass --watch sass\style.sass:css\style.css
參考
沒有留言:
張貼留言