SCSS 在项目中的运用

最后一段时间一直在做一些网站或是CMS的项目，想用bootstrap，但是，设计那哥们说了，用什么都行，就不能用bootstrap，我去了个.....

无语中，逼着自己写。说实话，就是用bootstrap也只能用些基本的，大部分的式样还得改，因为UI有很大的出入。下面是我的一些经验，css同js一样，不管项目多大，都要从镙丝钉开始做起，再给不同的镙丝钉套不同尺寸的帽子，要由小至大的写，不能由大至少的写，不然，做到最后，疯掉的只能是自己。

项目UI比较另类，因此，我计划以bootstrap组件名称为头，写一个个的小组件，这样一目了然。

 

以上scss目录中包含一个ui组件，就是各个镙丝钉，在这些镙丝钉中又有两个公共的ui，分别是Color.scss与Size.scss （颜色与大小）。

我使用的编译scss的工具是 Koala 。这个项目用到的样式只有一个出口，就是 management.scss 文件，编译过程中文件的引用，绝对要做到每个文件仅编译一次。

上面是ui.scss 文件，是除color.scss 外所有基本组件的集合，因为color在size中已经被引用，没必要再重新加载一次。如果重复引用了，查找的方法是在每个ui前添加一个 /*注释*/ ，这段注释会被编译，通过查看这个注释来确定是哪个ui出了问题。当然也可以一个个的查看。

 

项目中的 common.scss 是私有部分中提取的公共样式，这层公共样式是为了在各个小的组件上添加的父层之后的一些效果，比如同样的组件，父组不同，显示效果不同。这样写可以写少的样式，但是能写不同风格的布局。