SCSS學習-前言(一)

前言

首先感謝六角學院- 廖洧杰校長所撰寫的 “30天掌握 SASS 語法” 這篇文章讓學習 SCSS 的我一直回頭學習,實在可以堪稱葵花寶典阿!!
我在這邊基於校長這篇文章來嘗試撰寫一篇 SCSS 版學習 SCSS。

這邊也提供30天掌握 SASS 語法原文連結。

SCSS/SASS是什麼?到底該學哪一個

很多人都會念”薩斯”、”沙士”(唸起來根本一樣…),然後都會覺得兩者名子不同應該是不同的東西,只是唸起來一樣而已。

依照我的解釋及觀念來講,SCSS 只是 SASS 新出的另一種 【CSS 預處理器】 寫法,相信聽到這 【CSS 預處理器】 有些人就會覺得好恐怖,其實不用擔心,SCSS/SASS 東西只是對 CSS 擴充的語言而已。

也不用特別去思考到底學 SASS 還是 SCSS,因為當你學會寫 SCSS 的時候,其實 SASS 你已經無意間學會6~7成(部分寫法與SASS不同)。

這兩者差異在哪裡呢?
直接來觀看比較快。

ps.這邊所使用的環境是 codepen 來做撰寫練習。

1.SASS 版本 (注意分號(:)後一定要空格,否則會出錯)

1
2
3
4
.box
background-color: red
width: 50px
height: 50px

SASS版本

2.SCSS 版本

1
2
3
4
5
.box {
background-color: red;
width: 50px;
height: 50px;
}

SCSS版本

SASS 少了括號、分號,主要用縮排,程式碼寫起來也比較乾淨,相較於 SCSS 學習曲線會比較高。
如果對縮排定義不清楚的話,就很容易出現編譯錯誤,而導致學習上的困擾及撞牆。

相較之下 SCSS 與原本的 CSS 並無多大差異,對於新手來講是比較好上手,所以你問我初學想學 CSS 預處理器應該要挑一個,我想你看完前言就已經大概知道該怎麼選擇了。

結語

對於寫 SCSS 到現在的心得來講,開發上效率先不談,但是對於想培養程式邏輯的人是一個很好入門的語言,因為 SCSS 中也是很像在寫程式語言,但是不會有太多的邏輯判斷。