如何转换？Css组织Sass项目结构
先说组织
一步到位，在常规目录同级，即 html，js，css 等类似文件夹同级创建 sass 文件夹，统一放置 .scss/.sass 文件。
sass 文件夹下再细分，诸如 e.g-1：
sass/
|
|-- modules/ # 通用模块
| |-- _all.scss # 包含了所有模块
| |-- _utility.scss # 模块名称
| |-- _colors.scss # Etc...
| ...
|
|-- partials/ # Partials
| |-- _base.sass # 引入项目所有的mixins和项目的全局变量
| |-- _buttons.scss
| |-- _figures.scss
| |-- _grids.scss
| |-- _typography.scss
| |-- _reset.scss
| ...
|
|-- vendor/ # 第三方/供应商etc
| |-- _bootstrap.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # 主样式文件通过类似 @charset "UTF-8"; @import "partials/base"; 引入所需，生产中只编译此文件;请保持引用注释习惯，减少根目录 README.md 的创建。
sass 文件夹下再细分，诸如 e.g-2：
sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ...
|
|– components/
| |– _buttons.scss
| |– _carousel.scss
| |– _cover.scss
| |– _dropdown.scss
| |– _navigation.scss
| ...
|
|– helpers/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
| ...
|
|– layout/ #alse call utils
| |– _grid.scss
| |– _header.scss
| |– _footer.scss
| |– _sidebar.scss
| |– _forms.scss
| ...
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ...
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| ...
|
|– vendors/
| |– _bootstrap.scss
| |– _jquery-ui.scss
| ...
|
|
`– main.scss
如何拆分文件，随你，但是，建议一个组件对应一个 .scss。
参考资料：管理Sass项目文件结构，如何组织一个Sass项目
参考项目：Octopress， Sass Twitter Bootstrap
引申问题/坑：多个主文件的呈现方式，页面引入 https://www.zhihu.com/question/35708352/answer/69690651
再说转换
第一步，需要将 .css 修改后缀为 .scss，scss 能消化css。
第二步，ruby环境下安装 sass（compass的取舍）。
第三步，配置 config.rb。
第四步，工具及重构。
参考详情：将你的CSS项目转换成Sass
