Sass之7-1布局

​ 使用css进行前端样式的编写无疑是痛苦的：所有的样式都放在同一个文件下，不支持变量，不支持嵌套语法，很容易写着写着就成百上千行，这使得样式的后期维护变得无比头疼。Sass, LESS, stylus等css预处理语言的出现无疑解决了css的很多痛点，例如使用Sass进行样式的编写能够让我们结构化的管理所有的样式文件，然后通过@import语法来引入到主样式文件上。这使得样式文件的可读性、维护性增强。以下记录scss经典的7-1布局，具体的Sass目录结构请参考：Sass-template

基本目录结构(7–1 Pattern)

​ scss的目录结构与js相似的目录结构：相同的组件统一放在一个文件夹下，然后绑定到DOM节点的父组件放在最外层目录下。

styles/
|
|-- base/                  # 包含整个项目最基本的基础样式
|   |-- _reset.scss         # 或者_normalize.scss
|   |-- _typography.scss     # 排版样式
|   |-- _base.scss          # 一些通用的html标签的样式，比如, 
|   …
|
|-- components/             # 基础组件
|   |-- _buttons.scss         # 按钮
|   |-- _search.scss          # 搜索按钮
|   …
|
|-- helpers/
|   |-- _variables.scss       # Sass Variables
|   |-- _functions.scss       # Sass Functions
|   |-- _mixins.scss          # Sass Mixins
|   …
|
|-- layouts/
|   |-- _header.scss          # Header
|   |-- _footer.scss          # Footer
|   |-- _sidebar.scss         # Sidebar
|   …
|
|-- pages/
|   |– _admin.scss            # admin页面的特殊样式
|   |– _login.scss            # login页面的特殊样式
|   |– _main.scss             # main页面的特殊样式
|   …
|
|– themes/
|   |– _theme.scss            # 默认主题
|   …
|
|-- vendor/                   # 来自第三方的CSS或Sass文件，比如Bootstrap, jQuery
|   |-- _hon-dls.min.scss
|   |-- _loadMask.scss    
|   |-- _react-bootstrap-table.min.css # 当然可以包含css文件
|   …
|
`-- main.scss                 # 主Sass文件放在最外层目录下
`-- admin.scss
`-- login.scss
`-- changePwd.scss
`-- resetPwd.scss

主样式表

​ 主样式表应该尽可能的干净整洁，所有样式都通过@import进行引用。为了保证可读性，主样式表应该遵循如下的规范：

• 一个@import对应一个文件
• 一个@import占一行
• 相同文件夹下的两个@import之间不空行
• 不同文件夹下的两个@import之间要空行
• 省略文件后缀，省略前导的_下划线

@import "helpers/variables";
@import "helpers/mixins";

@import 'vendors/loadMask';
@import 'vendors/bootstrap.min.css';

@import "base/base";
@import "base/typography";

@import "components/button";

@import "layout/header";
@import "layout/footer";

@import "pages/_main";

参考

sass-guidelin.es/#architecture

sass-boilerplate