如何组织一个 Sass 项目? - 文章教程

如何组织一个 Sass 项目?

发布于 2021-10-25 字数 4874 浏览 942 评论 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项目中非常实用。

进一步探索

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

清晨说ぺ晚安

我之所以活到现在的全部意义,是为了此刻能对你说,我爱你,我会在你身后永远守护你。

18 文章
2 评论
21934 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0