SASS把scss转化为css的四种转化方式与命令

在终端输入命令:
$ sass --watch scss:css --style expanded
即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expanded转化方式.

一共有四种转化方式##

未转化的代码

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

1.nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

2.expanded 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

3.compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

4.compressed 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}