传统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, 类似于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的总结

优点

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

缺点

  1. 从css到SCSS,再到Compass, 难度逐渐增加。
文章目录
  1. 1. 传统CSS书写
    1. 1.1. 存在的问题
  2. 2. Sass方式书写
    1. 2.1. 何为Sass?
    2. 2.2. 存在的问题
  3. 3. 使用Compass
    1. 3.1. 关于Compass应该知道的知识
      1. 3.1.1. Compass主要分为七部分
  4. 4. 使用SCSS+Compass的总结
    1. 4.1. 优点
    2. 4.2. 缺点