昨天我們透過 npm i sass
成功將 sass 下載到了專案中,也在 package.json 這一份 package 清單中的 dependencies 找到了 Sass 的存在證明。
雖然現在才講有點晚了,但我們昨天所安裝的 Sass 是一種 CSS 的 預處理器,預處理器有著自己的 CSS 寫法,而在使用預處理器寫完 CSS 之後,最終還是得編譯成原生的 CSS 才能讓網頁讀懂。
現階段我們可以知道,要使用預處理器的話有兩件事情需要了解:
這次所安裝的 Sass 預處理器,他能接受兩種寫法:Sass 與 SCSS。
此二者間明顯的差異在於括弧、分號的存在與否:
Sass 的寫法:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
SCSS 的寫法:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
這邊所舉的例子是預處理器中的巢狀寫法。
我們要先使用官方所提供的編譯方式:
Dart Sass Command-Line Interface
而要使用這個 CLI,我們需要將 Sass 安裝在全域,而不是僅安裝在這個專案的範圍中而已。
在終端機透過以下語法安裝 Sass:
npm install -g sass
如此一來我們也可以把專案裡面的 sass 給移除:
npm uninstall sass
在終端機輸入 sass --version
確認是否安裝成功:
CLI 已經就緒後,就可以開始將 SCSS 的檔案編譯成原生的 CSS 了。
建立一個 input.scss
檔案,拿前面 SCSS 範例的寫法貼上:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
透過官方文件可以得知將 SCSS 編譯成 CSS 的指令:
sass <input.scss> [output.css]
在終端機中輸入該指令後:
便可以得到一份依據 input.scss
打包而成的 output.css
與 output.css.map
其中 outpust.css.map
是一份名為 source maps 的檔案,這份檔案作用的對象是瀏覽器的 dev tool,瀏覽器可以透過這份檔案將網頁上的樣式對應到你的 SCSS 檔案,而非編譯後的原生 CSS 檔案。
而這邊的 output.css
就是我們從 SCSS 編譯而來的原生 CSS 內容了,可以看到透過 SCSS 的巢狀寫法,省去了我們在原生 CSS 中每次都要在前面加上一個共同 class 的工。
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/*# sourceMappingURL=output.css.map */
Sass 與 SCSS 的差異:
問過一百次的問題之 Sass 和 SCSS 的差別
卡斯伯大大對 Sass Source Maps 的介紹!
Sass Source Maps
從未想過寫文也是種極限運動。