scss的4种编译方式

学习笔记整理

scss编译命令：sass --style 编译方式 你的.scss文件:输出位置的.css文件

---

sass的4种编译方式：（编译命令：--style）

1、nested 嵌套，和sass写法一样，代码间距有一定缩进，默认编译
2、expanded 展开，和csss书写规则一样，标准格式
3、compact 紧凑，多行输出，行格式
4、compressed 压缩，一行输出，一般用于生产环境

比如：
①将style.scss文件默认编译输出到上一级css文件夹
sass --style style.scss:../css/style.css

②将style.scss文件一行压缩编译输出到上一级css文件夹中
sass --style compressed style.scss:../css/style.css

TIPS(注意）:

• 编译的时候一定要进入你style.scss文件所在的scss或sass文件夹中
• 输入文件和输出文件之间有冒号： style.scss:../css/style.css
• 输出.css文件可以自己定义，但一般都是上一级的css文件夹。
• .scss编译成css文件时,最后生成一个.map文件，这个.map文件是调试scss文件使用的。
• 项目上线用的是压缩过的css文件，一般要去掉.map，可以使用--sourcemap=none去掉.map。
• 项目上线一般都是需要压缩编译，并去掉.map。sass --style compressed style.scss:../css/style.css.
• 呵，如果你的sass文件编译不行，再看看是不是文件名写错了，后缀名是.scss不是.sass，这个坑我已走了多次~

附：
①sass的监听命令：--watch可以随时监听scss文件的变化。
如：sass --watch style.scss:../css/style.css
也可以这样sass --style --watch style.scss:../css/style.css
②sass的文件有2种：.sass文件和.scss文件
.sass文件：缩进语法，不含符号{ }和；
.scss文件：和css语法相似