sass编译：简单粗暴的sass文件编译教程

0、磨刀不误砍柴工，学用工具好摸鱼

sass语法文档： www.sass.hk/docs/

一、非Vue、react等框架情况下，原生自编译sass文件

1、下载安装ruby包 rubyinstaller.org/downloads/， 完成安装后默认安装gem（sass包管理器）

2、切换国内ruby源: gem sources --add gems.ruby-china.com/ --remove rubygems.org/

3、安装sass: gem install sass

4、可选安装compass: gem install compass

----------以下在终端输入命令，用了compass命令就不用sass的了----------

compass watch // 自动监听.scss 文件改动并生成同名css文件

----------- --style xxx 详见最下面编译格式 --------

sass main.sass:main.css // 手动将main.sass编译为main.css文件

sass --watch main.sass:main.css --style expanded //监听sass文件自动编译并指定编译样式

sass --watch sass:stylesheets --style expanded // 监听文件夹并自动编译成指定样式的css文件

sass文件 与 scss文件 代码规范

// sass
.box
    width: 300px
    height: 400px
    &-title
        height: 30px
        line-height: 30px
// scss
.box{
    width: 300px;
    height: 400px;
  &-title{
    height: 30px;
    line-height: 30px;
  }
}

编译后样式

// --style nested
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }
// --style expanded
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
// --style compact
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
// --style compressed
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}