對sass變量名的思考

最近用sass進行預編譯處理css,發現對於變量的命名是關鍵一步，只有把變量命名作好後才能方便後續的工程；

語義化命名

以前命名一直用語義化的方式來對變量進行名，當用到的時候想着能夠根據當前語境進行變量的區分,
例如：

/* page main color */
$main-color:
$sub-color:
$word-color:
$border-color:

/* page main width */
$main-width:
$sub-width:

/* page main height*/
$main-height:
$sub-height:

/* Typography */
$sans-seris:
$serif:

可是這種命名發現到某些時候會很是困難，而後會發現變量名出現混亂，所以發現這是一個值得思考的問題！

探索之旅

後來從網上看了一些文章，參考了bootstrap的sass的寫法，發現這些命名都是以模塊化、組件化的方式去進行命名規範的。

變量只是一個開始，最後由單獨的樣式表或部分的Sass達到模塊化設計的目。

這個想法並不深遠，由於它已經被Sass和其餘預處理器使用， 搭配框架投入生產。

明顯的優點是：

• 易於維護——單獨的一套樣式將所有放到一個單獨的文件中。

• 模塊化系統的重用——樣式表在庫或框架中可被重構和集成。