為何我覺得在學習 JavaScript 之前,你可以先試著用 Sass 來寫你的 CSS

這篇文章一樣是寫給跟我差不多程度的、也正在學習前端技術的你看的。

先來說說我的程度:目前剛上完六角學院的基礎 HTML & CSS 課程,一般的網頁切版還 OK,目前正在看 RWD 以及 JS 相關的東西,現階段的目標是希望能夠手刻出這份設計稿,以前有碰過一點點的程式語言(Python)。

而我在之前就聽過 Sass,所以其實對他有一個印象,但是那個時候純粹出於好奇,所以沒有太深入研究,一直到今年下定決心要轉職,才開始學習。

而當我開始認真研究並且開始試著使用的時候,我發現他其實就是一個讓你開始踏入「程式設計」邏輯思考領域的入門磚。

巢狀式寫法、變數、模組化設計、引入…這些都是「程式語言」才有的特性(HTML 跟 CSS 我們都知道他雖然寫起來很像,但是它們都只是 標籤語言 而非程式語言),即便你的目標只是設計師,我都覺得多學 Sass 可以讓你用更少的時間去做更多的事情。

而如果想成為前端的工程師但是還沒有開始碰 JavaScript 的人,如果你之前沒有任何的程式語言基礎,Sass 就是一個讓你開始養成「用程式語言來思考」的好東西。

另外一個好處是,你可以開始建立自己的常用工具庫。

Sass 裡面有一個功能叫做 Mixin,有些人可能會覺得這跟變數(Variables)很像,可是 Mixin 定義的是整套的方法,而不是像 Variables 只賦予了一個 value。

舉個例子,CSS 的垂直置中有很多種寫法,但通常我們不會記得這麼多對吧?又或者是圖文並排的時候要清除掉圖片因為語系問題而留下的空白,這些都是一些常常用到的東西,這時候你就可以用 Mixin 將這些常用的方法寫好,當在專案中需要用到的時候直接 import 進來 include,輕鬆愜意。

Sass 真的不難,我推薦大家可以看這部影片:

[ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導

然後開始動手試試看吧。

謝謝大家看到最後,也歡迎分享交流。