http://mahua.jser.me/

https://www.sass.hk/

sudo apt install ruby

ruby -v

sudo gem install sass

sass -v

sudo apt install ruby-compass

compass -v

gem update sass

sass -v

sass -h

概述：sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等.

sass input.scss output.css

sass --watch input.scss:output.css

sudo sass --watch test.scss:test.css

sass --watch app/sass:public/stylesheets

sudo sass --watch sass/css:static/css --style expanded

|-sass
    |-css
        |-news
            |-news.scss
        |-product
            |-product.scss

|-static
    |-css

注：sudo sass --watch时 -> static/css下的目录会自动生成

概述：命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。

sass --watch input.scss:output.css --style compact

sass --watch input.scss:output.css --sourcemap

sass --watch input.scss:output.css --style expanded --sourcemap

sass --watch input.scss:output.css --debug-info

--style表示解析后的css是什么排版格式.
sass内置有四种编译格式:nested``expanded``compact``compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件.

sass style.scss:style.css --style nested

sass style.scss:style.css --style expanded

sass style.scss:style.css --style compact

sass style.scss:style.css --style compressed

|-sass
    |-main.scss             // 全局样式.
    |-_reboot.scss          // 重置浏览器默认样式.
    |-components            // 【组件】
        |-_components.scss  // 组合所有组件的核心文件.
        |-_alert.scss       // 提示框组件.
        |-_dialog.scss      // 弹出窗口组件.
    |-mixins                // 【混合器】
        |-_mixins.scss      // 组合所有混合气的核心文件.
        |-_box-shadow.scss  // 阴影混合器.
        |-_box-sizing.scss  // 盒模型混合器.
    |-functions             // 【自定义函数】
        |-_functions.scss   // 组合所有自定义函数的核心文件.
        |-_global.scss      // 全局自定义函数.
    |-variables             // 【变量】
        |-_variables.scss   // 全局变量定义.
    |-themes                // 【主题】
        |-_default.scss     // 默认主题.
    |-modules               // 具体模块.
        |-_core.scss        // 模块核心(import变量、混合器、自定义函数……).
        |-domain            // 【域名模块】
            |-domain.scss   // 域名模块

|-css
    |-main.css              // sass生成.
    |-bootstrap.min.css     // 第三方css框架.
    |-modules               // 模块.
        |-domain
            |-domain.css
    |-vendor                // 第三方插件.
        |-date
            |-date.css