IT兄弟連 HTML5教程 初識Sass Sass的作用

• 2019 年 12 月 26 日
• 筆記

在了解完Sass之後，相信大多數人更期望了解它到底如何將我們編寫CSS程式碼的效率提高的？到底是如何讓我們的CSS程式碼更具有可維護性的？到底如何讓我們編寫的CSS程式碼更具有重用性的？那麼筆者就來講述一個Sass編碼的實例，來解答這些疑問。

首先我們先擬定一個需求，讓HTML中按鈕有相同的大小和不同的款式，那麼筆者根據這一需求，使用Sass編寫出了如下程式碼：

首先筆者來分析一下，上述程式碼的具體含義。在20行以前筆者將按鈕的背景色，字體顏色、按鈕背景色、邊框線顏色定義成了變數；在21行到25行，筆者將按鈕的主體設置封裝成了一個混合宏（與函數概念類似），並接受三個參數，分別為筆者所定義的變數；從26行到39行，筆者將按鈕的基本模型定義了一段CSS程式碼；第39行到最後，筆者使用類選擇器，分別調用了相應混合宏，並傳遞了三個參數。

上述的Sass源碼編譯之後的程式碼就是這樣的，如下所示：

編譯後的CSS與源碼對比來看，我們先總結以下區別：

1．變數和混合宏沒有在編譯後出現

2．混合宏生成對應的程式碼

對比之後相信各位讀者也有所發現，Sass的源碼從程式碼上要多於CSS程式碼，這是因為我們考慮了擴展性和維護性。

那麼可以想像一下，假如我們需要對顏色微調，不需要去尋找內部程式碼，只需要更改頭部的變數即可，維護性增強；再假如我們需要擴展一個按鈕的顏色，那麼我們只需要再額外增加三個變數，然後去調用@mixin混合宏即可；再假如我們在另一個項目中也需要用到按鈕樣式，那麼我們只需要在相應項目中使用這個sass就可以了，並且我們可以對顏色很方便的微調。

那麼上例就展示了可維護性高、可擴展性強，並且復用性高，也就意味著效率也就變高了。Sass的功能不止於此，還有流程式控制制語句、內置函數、運算符等，這些都能夠提高我們的編碼效率，這在我們基本語法章節做詳細的介紹。