对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和其他预处理器使用， 搭配框架投入生产。

明显的优势是：

• 易于维护——单独的一套样式将全部放到一个单独的文件中。

• 模块化系统的重用——样式表在库或框架中可被重构和集成。