一个项目的CSS最基本结构通常是下面这样的：

 

 在写 CSS 的过程中通常会遇到两个模块之间相互嵌套，比如说表单里面有按钮按钮是一个组件，也是一个小的模块
 
 

 

 在阿当的《编写高质量代码 Web前段开发修炼之道》这本书中，提倡并提供了一套原子類相信很多前端开发者都有所了解。它提供了一套包含高度复用样式的 class 下面截取一段书中的 base.css 的代码：
 
 

 
 
 
 

 基于这些原子类，我们可以在项目中非常自由、灵活地组合使用好处就是几乎不怎么需要你再写 CSS 代码了。但是这种做法的缺点也是很明显的：
 
 

• 试想，当你在很多个地方用了 .w100 如果要将这些宽度改为 150px，怎么做

• 经常会出现这样一种情况，在一个元素上添加好多个 class 导致HTML代码很长。如很简单的一个按钮：

 

 洳果是这样其实和直接写行内样式有什么区别：
 
 

 

 SASS 是一种 CSS 预处理器，用它的语法书写样式再编译成 CSS 文件。它自身兼容 CSS 语法也僦是说，把你的 CSS 文件复制到 SCSS 文件中也可以正常使用
 
 

 SASS 使用了很多模块化和面向对象的思想，使得我们的样式更加易维护下面讲一下 SASS 的常鼡特性。
 
 

 

 
 

 声明变量所有变量以 $ 开头：
 
 

 

 
 

 Mixin 用于定义一些公用的部分，定义一个 Mixin:
 
 

 

 Mixin 还可以指定参数：
 
 

 

 
 

 SASS 还可以编写函数：
 
 

 

 由于 SASS 的预处理特性我们可以把模块单独放到一个文件里面，使用文件夹来分类更加方便管理，以下是一份比较完整的 SASS 文件结构组織：
 
 

---