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

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ