我们先简单的试一下 sass ... 打开项目 .. app .. styles ... 重命名一下这里的 main.css .. 文件的扩展名设置成 scss

在这个文件里你可以用 scss 的形式去创建样式 .. 文件的内容会自动编译好，放到 .tmp 还有 dist 目录的下面 ..

sass 里的变量的名字是用 $ 开头的，定义一个变量，名字是 page-background .. 它的值是一个颜色 ..

下面再添加一个样式 ... 一个 body 元素选择器 ... 设置一下 background 属性，表示背景 .. 它的值用一下上面定义好的 $page-background 这个变量 ..

保存一下 ... 你会看到页面的背景颜色的变化 .. 打开 .tmp 下面的 styles .. main.css

这个文件就是把 sass 编译成普通的 css 的样子 ..

在 styles 目录的下面 ... 新建一个 sass 文件 ... 文件的名字可以使用下划线开头 .. 表示这个文件是一个 Partial，也可以把它想成是个模块 .. _base.scss

这种带下划线开头的 sass 文件不会被编译成单独的 css 文件，你可以在其它的 sass 文件里导入它 ..

我们把在 main.scss 里面添加的东西放到这个新的文件里 .. 随便再改一下这个颜色的值 ..

然后在 main.scss 文件里，用一下 @import 去导入 base ...

保存 ... 效果是一样的 ..

项目里用的一些变量可以单独放到一个 Partial 里 .. 新建一个 scss 文件，名字是 _variables.scss

把在 _base 里面定义的变量放到这个 _variables.scss 文件里 ... 改一下颜色的值 .. #f8f8f8

然后在 main.scss 里面，再导入这个变量文件 ... 保存 ... 你可以把项目需要的样式分成不同的部分，把它们单独放在各自的文件里 .. 然后在这个 main.scss 里面，可以导入这些 sass 文件。