如何组织一个 Sass 项目？

发布于 2021-10-25 12:38:49 字数 3938 浏览 1356 评论 0

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项目中非常实用。