问题一:
情景:想要使用让SASS监听某个文件或目录,但在命令行下面语句:
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
出现下面错误:
>>> Sass is watching for changes. Press Ctrl-C to stop.
Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8
Use --trace for backtrace.
原因:文件所在的目录地址中存在中文:比如:
F:\学习\demo2\static>sass --watch sass/style.scss:css/style.css
解决:将目录中的中文修改成英文(目录中不要带中文)
问题二:koala编辑器里面一样,如果目录中出现中文,同样会报错。一定要慎重。。。
命令行编译;
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets
命令行其他配置选项
运行命令行帮助文档,可以获得所有的配置选项
sass -h
我们一般常用的有--style
,--sourcemap
,--debug-info
等。
sass --watch style.scss:style.css --style compact //生成的格式
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
--style
表示解析后的css是什么格式,有四种取值分别为:nested
,expanded
,compact
,compressed
。--sourcemap
表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map
文件。--debug-info
表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。
四种编译排版演示;
//未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}