IT兄弟連 HTML5教程 初識Sass Sass使用實例

• 2020 年 1 月 2 日
• 筆記

圖1 七色板示意圖

在初步了解Sass之後，可能在思路上還沒有從CSS轉換過來，那麼筆者就帶領各位讀者一起來分析這個需求的特點。

Ø　七色板由七種顏色組成，分別為紅橙黃綠藍灰紫　　

Ø　每一種顏色都是自左向右顏色逐漸加深　　

Ø　每一行格子有十一個

Ø　每一行的都有一個基色，並且基色的位置位於中間位置，小於基色位置則依次變淺，大於基色位置則依次加深。　

既然分析出了特點或需求，那各位讀者就來看看在之前的講述中是否有哪些基本語法可以為這次需求所用到，筆者將解決方案總結如下。

Ø　七種顏色可以定義為變數，或者列表解決七色問題。

Ø　顏色加深函數「darken」和變淺函數「lighten」解決顏色問題。　　

Ø　流程式控制制語句中的@for循環，解決相同格子與類似行的問題。

Ø　流程式控制制語句中的@if語句，解決加深和變淺問題。　

既然基本語法都能夠解決分析出來的每一個需求，那麼只需要理清思路就能實現這個七色板，那麼筆者就帶著大家理一下實現的思路。

首先將前台的HTML程式碼實現，如下所示：

其二，筆者先將七色板分解，僅實現第一行的紅色板，如下所示：

可以看到，第一行實現成功。其實第一行實現成功後，僅需要替換對應的選擇器和顏色值即可讓它實現其餘色板。那麼，各位讀者有沒有想到，可以傳遞參數的混合宏呢？

其三，用混合宏封裝單行色板，然後使用for循環最終實現七色板，最終程式碼如下：

相信有讀者朋友在完成七色板功能之後，還會有這樣的疑問。原生的CSS就能實現這個功能，為什麼還要多學一門語言呢，太麻煩了。

那麼筆者就拋出幾個問題，各位讀者請思考一下解決方案，問題如下：

Ø　如果需要修改格子的尺寸和顏色，是重新做一份，還是修改Sass源碼，如果修改那該如何修改？　

Ø　如果要將七色板增加成八色板、九色板，那麼該如何去擴展？　　

其實呢，使用Sass編碼時正好解決了這些維護、擴展的問題。下面是上面兩個問題的回答。

Ø　如果需要修改尺寸，僅需要修改行高和行寬即可，格子寬度就是行寬除以單行格子個數。如果修改顏色，僅需要對顏色列表進行修改調整即可。

Ø　如果需要增加或減少色板，僅需要對顏色列表進行相應的增加和減少，並且要與HTML程式碼對應即可。

筆者就不再貼編譯後CSS程式碼的圖了，它最終使用默認模式生成的程式碼行數是250行左右，而上述的Sass程式碼僅需要43行就能完成。

最後，筆者使用一句話總結一下Sass的優點：使用Sass語言編寫CSS程式碼，讓你的程式碼具有高品質、高擴展、易維護、高效率的特性。