组织 Sass 文件

Question

使用 Sass 的美妙之一就是：它能够很轻易地让你组织你的代码。在过去，把不同的css文件导入到某一个css文件中是一个不怎么好的方法，因为这样会增加更多的http请求。然而使用Sass，它可以允许你用一种存在逻辑的方式把不同的模块的样式文件分解出来。

什么是局部文件？Sass 文档 将能够很好的解释它。

如果你有一个scss或sass文件，你仅仅只是想把它导入到某一文档里，而不是像让它编译为css文档。你可以在改文件前添加一个下划线，这样就是提醒sass文档不要把它编译为普通的css格式文件了。

你可以这样系组织你的Sass文件。首先创建一个全局scss目录：在这里我创建了一些局部的scss文件，他们是bits ，forms，icons，images，mixins等等。每个部分都有对应的样式分别为：_bits.scss，_forms.scss，_icons.scss，_images.scss，_mixins.scss等等。我们可以很轻易的看到他们的一一对应关系。

+stylesheets/
|--_bits.scss
|--_forms.scss
|--_icons.scss
|--_images.scss
|--_mixins.scss
|--_type.scss

当你做好这些后，下面就可以吧他们导入到你的主题样式表里了。我比较喜欢添加一下注释来提醒一下自己,他们每一部分是有什么作用。

/*变量
---------------
设置变量。包括颜色和间距
--------------- */

@import "bits";

/*基本样式
---------------
设置基本样式. 包括排版,图片,表单和 Icons.
--------------- */

@import "type";
@import "images";
@import "forms";
@import "icons";

当你初次这样组织之后,也会不怎么适应。但是我可以告诉你他将节省你很多的时间。在一个大的项目中，有了方向就是成功的一半，让那种成千上百行的样式代码都离的远一些吧。取而代之的将是一些简短、明确、关键、易于管理的文档了。