sass(css) 分层构架

概览

我所使用的sass架构参考自这篇文章Architecture for a Sass Project，并根据我自身对sass的理解做了一些调整。

sass整体目录分层结构如下所示：

/sass
|
|-- /vendors
|
|-- /helpers
|   |
|   |-- _functions.scss
|   |
|   |-- /mixins
|   |   |-- _border_radius.scss
|   |   |-- _box-shadow.scss
|   |   |-- _button.scss
|   |   |-- ...
|   |
|   \-- /variables
|       |-- _base.scss
|       |-- _components.scss
|       \-- _partials.scss
|       \-- _pages.scss
|
|
|-- /base
|   |-- _reset.scss
|   |-- _base.scss
|   \-- _utilities.scss
|
|
|-- /components
|   |-- _alert.scss
|   |-- _badge.scss
|   |-- _button.scss
|   |-- _form.scss
|   |-- ...
|
|
|-- /partials
|   |-- _header.scss
|   |-- _footer.scss
|   |-- _sidebar.scss
|   |-- ...
|
|-- /pages
|   |-- home.scss
|   |-- login.scss
|   |-- ...
|
|-- /themes
|
\-- app.scss

app.scss

首先要注意的是根目录下的app.scss，这个文件用来引入各个模块(/base,/components,/partials,/pages…)，并且用来生成最终的css文件。

app.scss文件的内容如下所示：

/* ==================================
 * Vendors
 * ================================== */
...

/* ==================================
 * Helpers
 * ================================== */
@import "helpers/_functions.scss";
@import "helpers/variables/_base.scss";
@import "helpers/variables/_components.scss";
@import "helpers/variables/_partials.scss";
@import "helpers/variables/_pages.scss";

@import "helpers/mixins/_badge.scss";
@import "helpers/mixins/_button.scss";
@import "helpers/mixins/_border_radius.scss";
@import "helpers/mixins/_box-shadow.scss";
...

/* ==================================
 * Base
 * ================================== */
@import "base/_reset.scss";
@import "base/_base.scss";
@import "base/_utilities.scss";

/* ==================================
 * Components
 * ================================== */
@import "components/_alert.scss";
@import "components/_badge.scss";
@import "components/_breadcrumb.scss";
@import "components/_button.scss";
...

/* ==================================
 * Partials
 * ================================== */
@import "partials/_header.scss";
@import "partials/_sidebar.scss";
@import "partials/_nav-menu.scss";
...

/* ==================================
 * Pages
 * ================================== */
@import "pages/_home.scss";
@import "pages/_login.scss";
...

/* ==================================
 * Themes
 * ================================== */
...

Vendors

/vendors 用来放一些第三方库或者框架的css文件，比如Bootstrap、jQueryUI等。比如：

• bootstrap.scss
• jquery-ui.scss
• select2.scss

Helpers

/helpers 目录用来存放sass的变量、函数、mixin。此目录下的所以文件均不会单独输出css样式，它们是为后面的模块而服务。比如：

• _functions.scss
• /mixins
  
  • _border_radius.scss
  • _box-shadow.scss
  • _button.scss
  • …
• /variables
  
  • _base.scss
  • _components.scss
  • _partials.scss
  • _pages.scss
  • …

Base

/base 目录有以下三个文件：

• _reset.scss
• _base.scss
• _utilities.scss

_reset.scss存放浏览器重置样式；

_base.scss存放常用html元素的样式，如h1, h2, h3, h4, h5, body, ul等；

_utilities.scss用来存放一些重用度很高，粒度很小的工具型样式，如.d-block { display: block; }，.text-center { text-align: center; }等。

Components

/components 目录看它的名字就知道是用来存放组件，比如：

• _alert.scss
• _badge.scss
• _button.scss
• _form.scss

Partials

/partials 也是页面的组件，但是概念上它比component要大，通常是一些component的组合，或者是一个较大的模块。比如：

• _header.scss
• _footer.scss
• _sidebar.scss
• _nav.scss

有一些模块看起来即可以放在/partials也可以放在/components，这个可以根据自己对模块粒度的把握来决定它所在的目录。

Pages

/pages 目录存放特定页面的特殊样式和整体页面的布局样式。比如：
* home.scss
* login.scss

Themes

/themes 目录存放主题样式控制代码，适合有多个主题的网页。比如：
* _dark-theme.scss
* _light-theme.scss

例子

实例可参考：angular.js sample scss

参考

• Sass: Directory Structures That Help You Maintain Your Code
• Architecture for a Sass Project