SCSS map 與 each 迴圈

我們都非常喜歡物件，因為相關的東西可以放在一起，相當容易理解。

SCSS 也加入了這種方便的特性，但在 SCSS 的世界裡他不叫物件，而是叫 map，讓我們來看看 map 長什麼樣子吧！

SCSS list 與 for 迴圈

SCSS list 有點類似於一般語言的陣列。
陣列有點像是櫃子，我們把東西一個一個存進去。例如：

$list: 12px, 14px, 16px, 18px;

實作上陣列常會搭配迴圈，在 SCSS 中也提供了我們這項功能。

SCSS 運算

SCSS 讓我們在撰寫 CSS 的時候，可以運用基本的運算。
其中我們多少會碰到一些單位、轉換的問題，以下帶大家了解它背後運算的邏輯。

SCSS 變數

像 SCSS、LESS 這種 CSS 預處理器，都具備變數這個特點。
變數存取一些有意義的數值，幫助我們更方便的建構或維護代碼。

掛蚊帳的回憶

這幾天跟一個以前很喜歡的女生聊了一下 Line，突然想起當兵的時候，如果要打電話，必須要等寢室裡所有的蚊帳掛好之後才行。

所以為了睡前可以打 3 分鐘的電話給她，我每天一洗完澡，就急急忙忙的把所有弟兄的蚊帳通通掛好，然後興匆匆的趕緊打電話給她。

現在想想雖然很辛苦，但也許是這樣，所以這份回憶才顯得特別吧！

SCSS 巢狀選擇器

SCSS 的巢狀標籤，能幫助我們建構出更簡潔、直觀的代碼，讓我們看一些相關的範例：