概览

我所使用的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

sass(css) 分层构架相关推荐

html文件可以分层吗,css分层是用什么标记？
该方法适用于所有品牌的电脑. css分层是用" "标记. div标记,称为区隔标记.作用是设定字.画.表格等的摆放位置.当你把文字.图象,或其他的放在 DIV 中,它可称作为&qu ...
怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理大量的样式,覆盖.权重和很多!importa ...
android 属性动画弧形,CSS分层动画可以让元素沿弧形路径运动
CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径.给一个元素添加了 animation 或者 transitio ...
html 路径线条动画,CSS分层动画可以让元素沿弧形路径运动
CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径.给一个元素添加了 animation 或者 transitio ...
一步一步学Linq to sql（十）：分层构架的例子
项目介绍这节将要把<一步一步学Linq to sql(三):增删改>中留言簿的例子修改为使用WCF的多层构架.我们将会建立以下项目: l A,网站项目 WebSite:留 ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
20190421-那些年使用过的CSS预处理器（CSS Preprocessor）之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
css，sass，scss和less的区别
css,sass,scss和less的区别 1.css 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语 ...
.scss和.css的区别,css - SCSS和Sass有什么区别？
css - SCSS和Sass有什么区别? 从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言. 与SCSS有什么区别? 它应该是同一种语言吗? 类似? 不同? bruno ...

sass(css) 分层构架

概览