iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

如何成為一名斜槓煉金術士,學習前端相關技能系列 第 12

Day12 什麼是Sass?

大家好,我是烏木白,今天要來和大家來講解Sass。

Sass?

Sass 是一個管理 Css 的語言,Sass 是讓初學者認識到一些基礎的程式邏輯,如果你還沒學習過 Javascript 之類程式語言,Sass 會讓你先體會到一些邏輯。大家在寫 Css 時基本上都是一隻 all.css 一路寫到地,我也不例外,但是自從了解到了 Sass 之後,我才發現原來有這麼一個工具可以讓我的 Css 變得更加清晰及一目了然。

Sass 與 Css 的不同之處?

如果我今天的 HTML 檔案,有一個叫做 header 的 css 選擇器,裡面包著 h2、menu、logo,我只需要在 Scss 的檔案裡面做編寫,然後就可以使用外掛程式幫我編譯成 Css 的檔案!

Sass 的原理

以這張圖來說,我們就是把許多的檔案都把他獨立出來成一個 Scss 檔,然後我們再匯入進去 all.scss 檔案裡面,那麼外掛程式就會再幫我們編譯出 all.css 檔案,這樣我們再檢查資料時,會更佳的清楚明瞭!

Sass 的兩種寫法

最左邊的是 Css 中間的是 Scss 最右邊的是 Sass ,Sass 大部分的人都有自己習慣的寫法,那我的寫法是中間的 Scss 的寫法,在看的時候比較不會出差錯!

因為我的習慣是 Scss ,之後有關 Sass 的文章,會以 Scss 為主喔!

圖片來源:
六角學院


上一篇
Day11 遠端共同協作 - 使用 GitHub
下一篇
Day13 Sass篇-什麼是變數?
系列文
如何成為一名斜槓煉金術士,學習前端相關技能30

1 則留言

0
zhix6842
iT邦新手 5 級 ‧ 2021-09-21 15:22:24

標題打成Ssss了~~
剛好這次也在寫Sass的文章,一起加油!
https://ithelp.ithome.com.tw/users/20141363/ironman/4590

烏木白 iT邦新手 5 級 ‧ 2021-09-21 15:24:27 檢舉

謝謝您~一起加油吧!

我要留言

立即登入留言