Sass Project Structure Best Practices

关于css/sass文件的组织，每个人都有自己的方法，我觉得划分清晰，方便查找即可，没有一个一成不变的模式。但是大体的规律还是能总结出来的。 文件的组织要考虑一下几点：

• 分开项目自己的代码和第三方的代码
• 分开会编译成css的代码和基本变量函数代码
• 分开整体布局的代码和各个元素的代码
• 分开各个页面/控件的代码

我觉得要区分两种项目来谈，一种是框架，另一种是App。两者有共同的地方，也会有区别。

框架

对于框架来说，所有的CSS和JavaScript代码应该都是基于原生的，不应该再引入第三方的dependency（复制粘贴的不算）。 框架大体上要有如下功能：

• 布局
• 风格（包括颜色库，字体，html元素的样式, 主题等）
• 控件

我觉得可以分为如下部分:

• base: 所有不产出css的部分，包括variables，mixins，utilities等
• layouts: 整体布局，比如grid系统, form的布局, flex布局的重写，原生元素布局的覆盖等
• components: 自定义控件的css文件

应用

对于一个应用来说，主要就是布局，页面和自定义的控件了。我觉得可以分为如下的文件夹:

• base: 项目内部的通用样式和变量
• partials: 定义页面各个部分的样式，比如 header, footer, sidebar等
• components: 项目内部自定义的控件
• pages: 包含各个页面独有的代码
• vendors: 用来引入第三方的scss文件'