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 中也是很像在寫程式語言，但是不會有太多的邏輯判斷。