iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0

昨天我們透過 npm i sass 成功將 sass 下載到了專案中,也在 package.json 這一份 package 清單中的 dependencies 找到了 Sass 的存在證明。

雖然現在才講有點晚了,但我們昨天所安裝的 Sass 是一種 CSS 的 預處理器,預處理器有著自己的 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;
  }
}

這邊所舉的例子是預處理器中的巢狀寫法。

編譯成 CSS

我們要先使用官方所提供的編譯方式:
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.cssoutput.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 */

參考

官網:
https://sass-lang.com/

Sass 與 SCSS 的差異:
問過一百次的問題之 Sass 和 SCSS 的差別

卡斯伯大大對 Sass Source Maps 的介紹!
Sass Source Maps


從未想過寫文也是種極限運動。


上一篇
Day03 - 把 sass 從 npm 帶回家
下一篇
Day05 - 把 Sass/SCSS 變成 CSS(2)
系列文
因為拖延症而沒有好好準備有系統性文章架構的我只能靠一天一筆記來贖罪30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Ray
iT邦研究生 4 級 ‧ 2022-09-18 23:58:15

果然是極限運動大師,我又看到這一系列存活一天了!

珍惜生命...

0
孤獨一隻雞
iT邦研究生 4 級 ‧ 2022-09-19 00:07:14

差一點點開天窗

快鎮不住惹哭R...

0
一顆蘋果熊
iT邦新手 5 級 ‧ 2022-09-19 13:47:14

敲碗把美少年變成人夫的密技!!

私!

/images/emoticon/emoticon04.gif
泥騙人!泥只私給我奇怪的歐吉桑⋯⋯

阿你就喜歡

我要留言

立即登入留言