【Sass初级】如何组织一个Sass项目

本文由大漠根据John W. Long的《How to structure a Sass project》一文所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://thesassway.com/beginner/how-to-structure-a-sass-project，以及作者相关信息。

——作者：John W. Long

——译者：大漠

Sass最有用的一个特性就是可以将你的样式表分隔成很多个单独的文件。然后，你可以在主样式文件中通过@import引入你所需要的.scss文件。

但是你应该如何组织你的Sass项目呢？有没有分离样式文件的一个标准呢？

基本目录结构

我喜欢将我的Sass项目这样组织文件：

stylesheets/
|
|-- modules/              # 通用模块
|   |-- _all.scss         # 包含了所有模块
|   |-- _utility.scss     # 模块名称
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # 引入项目所有的mixins和项目的全局变量
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # 其他项目的CSS或SCSS
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # 主SCSS文件

主样式表

继续让我的主样式文件保持干净与简洁：

// Modules and Variables
@import "partials/base";

// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...

// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";

模块, 局部和供应商

正如你所看到的，我将我的项目划分成三部分：模块样式(Modules)，局部样式(Partials)和供应商样式(vendor)（也就是引入的第三方样式）。

modules目录是用来放置Sass文件的，他不会编译出CSS文件。主要放置了混合宏（mixins）、函数(functions)和变量(variables)这些东西。
partials目录主要是用来放置我的CSS的，有很多人喜欢将其拆分成“header”、“content”、“sidebar”和"footer"等组件（或者还有其他的）。因为我自己更喜欢SMACSS，所以我将其化分更多的类别（typography, buttons, textboxes, selectboxes等等）。
vendor目录放的是第三方的CSS。放置了由其他人(或你自己为其他项目开发的其他组件)开发的预先封装的组件。比如说在vendor目录中放置了jQuery UI和Color picker组件。按一般的原则来说，我是不会支修改vendored目录中的文件，我只会将这些文件引入到我的主样式文件中。这样我就可以很容易在项目中更新第三方样式的未来版本。

使用基础的局部样式

在我的partials目录中，你会注意到，我还放了一个基础的partials。这个partials主要目的是配置一个基本的Sass环境，使大家可以很容易构造一个样式。

他看起来像这样：

// Use Compass ('cause it rocks!)
@import "compass";

// Font weights
$light: 100;
$regular: 400;
$bold: 600;

// Base Font
$base-font-family: sans-serif;
$base-font-weight: $regular;
$base-font-size: 13px;
$base-line-height: 1.4;

// Fixed Font
$fixed-font-family: monospace;
$fixed-font-size: 85%;
$fixed-line-height: $base-line-height;

// Headings
$header-font-weight: $bold;

@import "modules/all";

这个样式表设置了一些全局的变量和加载了我所有的模块。模块不能再次的导入，不然会导致CSS输出。将所有变量和模块构成了我一个基本的Partials，让我有一个好的Sass环境。我可以使用@import语句引入一个样式。这可以让我导入不同的Partials来构建更多个样式表。一旦项目发展到一定的规模，多个样式表使用起来就更得心应手。

进一步加强

根据用户的建议，我们进一步的对其完善。通过一个单独的Rails应用上同时开发多个子项目，我们可以将每个子项目设置为一个顶级的目录，这个时候，我们的项目目录结构将看来是这样的：

stylesheets/
|
|-- admin/           # Admin子项目
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account子项目
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site子项目
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # 其他项目引入的CSS或SCSS
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # 每个子项目的主SCSS文件
|-- account.scss
`-- site.scss

正如你所看到的，每个子项目都有其自己的主样式文件，模块，局部和基础样式。vendor是通用的，并且有自己的一级目录。这样的文件组织方式，在一个大型的Sass项目中非常实用。

进一步探索

现在，我在这里介绍了我自己的想法，你或许还会想了解别人是如何组织他们的Sass项目。实际上你可以在这里做很多的变化。下面的这些项目可能让你得到一些更好的方法：

你还可以阅读Dale Sande写的一篇优秀的文章：《Clean out your Sass junk drawer》

《Clean out your Sass junk drawer》需要翻墙才能阅读。早前翻译了Hugo Giraudel写的一篇有关于这方面的教程，感兴趣的同学可以阅读译文《管理Sass项目文件结构》，原文《Architecture for a Sass Project》。——@大漠

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

出处：

英文出处：http://thesassway.com/beginner/how-to-structure-a-sass-project

中文译文：http://www.w3cplus.com/preprocessor/beginner/how-to-structure-a-sass-project.html