如何组织一个Sass项目

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

本文由大漠根据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项目这样组织文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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文件

##主样式表

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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环境,使大家可以很容易构造一个样式。

他看起来像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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应用上同时开发多个子项目,我们可以将每个子项目设置为一个顶级的目录,这个时候,我们的项目目录结构将看来是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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