【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
中文译文：https://www.fedev.cn/preprocessor/beginner/how-to-structure-a-sass-project.html
Air Max 90 NS GPX