如何组织sass/less文件？

Question

就是最近在写的一个项目的时候在思考的问题
比如一个页面/模块有对应的sass文件，那么这个页面/模块的响应式样式是写在这个文件的最后面还是单独对应的响应式文件还是整站一个响应式文件比如mobile.scss？

Answer 1

先回答你的问题 Responsive 在我厂的标(che)准(dan)的做法
打印某个项目的目录:

├── base
│   ├── normalize.styl
│   ├── util.styl
│   ├── font.styl
├── module
│   ├── forms
│   │   ├── forms.styl
│   │   ├── forms-r.styl

每个模块都有单独的 Responsive(简称R) 文件, 然后在 build 的时候再把需要的部分 import 进来.

---

模块化的原因 - 复用 -> 降低耦合 -> 避免重复工作,
所以我会用 SMACSS 的方式构建目录和模块化样式.

Answer 2

推荐携程大漠翻译的一篇<管理Sass项目文件结构>

sass/ 
| 
|– base/
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
...

完成的目录结构，见图：

Answer 3

分开写.
粒度大概为: common, mobile, tablet, desktop.
拿grunt打包.
页面render时用不同的css地址.

Answer 4

1. 分离基础通用样式，提取变量和 mix-in
2. 可以把文字排版和布局排版的内容分割在不同文件中（来自compass模板）
3. 各页面的特有样式，自成文件，至于不同屏幕的代码怎么分割看个人喜好