html中将scss转编译为css,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}