这里本该有简介

sass(css) 分层构架

概览

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

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

app.scss

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

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

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

Elements

/elements 目录有以下三个文件:

  • _reset.scss
  • _elements.scss
  • _utilities.scss

_reset.scss存放浏览器重置样式;
_elements.scss存放常用html元素的样式,如h1, h2, h3, h4, h5, body, ul等;

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

_utilities.scss

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

例子

实例可参考:angular.js sample scss

参考