By

传统CSS书写

存在的问题

  1. 就算加了注释,代码也很难维护
  2. 为了保证样式被覆盖,CSS的权重可能会变得非常⾼

Sass方式书写

何为Sass？

Sass是CSS的预处理程序，其思想是用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。同样也有Less，Stylus等其他预处理程序，而本人在平常中没有实践过其他预处理程序，所以在此按下不表。SCSS实现了Sass的所有功能，并且有类似于css的句法，所以在工作中，我更偏爱SCSS。

存在的问题

使用SCSS容易造成嵌套层级过多，导致 CSS 权重过高的问题。大漠在知乎上的回答写着“别让你的嵌套层级超过四层”，而腾讯的AlloyTeam在Code Guide上写着”嵌套最多不能超过5层“。为了减少嵌套层级，我认为解决方法为：提取公因式。

提取公因式就是把相同表现类似的css用同一个class表示，而独特表现的元素单独写。要熟练使用此方法需要透彻了解css的权重。

使用Compass

在使用SCSS中，最实用的是[@mixin](http://sass-lang.com/guide#topic-6 “Mixins”), 类似于c语言中的宏，使用@mixin能大大提升写代码的效率。

在平常工作中，特别是在使用css3时需要注意浏览器前缀问题。如果不想手写 CSS3 的浏览器前缀，想让工具生成这些属性，那Compass 就是一个很好的选择。

关于Compass应该知道的知识

Compass是Sass的一种工具库（toolkit），引用阮一峰博客上的一句话：“Sass是一种”CSS预处理器”，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力”。

Compass主要分为七部分

  1. reset(normalize)*：重写浏览器的默认样式
  2. layout：⻚面布局
  3. CSS3：跨浏览器的CSS3（使用最为频繁）
  4. typography：文本样式
  5. helper：类似于Sass语法的，一系列函数,
  6. utilities:除去以上5点的其他工具,多为@mixin
  7. Browser Support：浏览器支持，直接决定了以上6点的表现

PS：reset与Normalize的区别：reset是“暴力”的重写浏览器默认样式。而Normalize分为8个部分进行重写，分别为：base, html5, links, typography, embeds, groups, forms以及tables。Normalize可以整体引入也可以分开引入。所以是使用reset还是Normalize，就看各位看官了（本人更偏向于Normalize）。

使用SCSS+Compass的总结

优点

CSS 权重尽可能低，容易修改、覆盖。加上适当注释后，更容易阅读代码
不⽤担⼼ CSS3 兼容性问题，直接配置解决

缺点

从 CSS 到 SCSS，再到 Compass, 难度逐渐增加。