Sass技术问题与解决方法
来源:互联网 发布:瑞典难民知乎 编辑:程序博客网 时间:2024/06/05 01:19
问题一:
情景:想要使用让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 --sourcemapsass --watch style.scss:style.css --style expanded --sourcemapsass --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}
阅读全文
0 0
- Sass技术问题与解决方法
- Sass技术问题与解决方法
- 安装sass失败,解决方法
- node-sass报错解决方法
- Sublime Text 写sass的时候,每次都需要输入一个分号的问题的解决方法
- node-sass安装问题
- sass编译乱码问题
- 【SASS-01】Sass安装与使用
- sass与less区别
- less与sass区别
- Sass 与 SCSS
- sass与gulp应用
- sass中带中文报错解决方法:
- node-sass安装失败解决方法 segment fault
- Sass解决不支持中文问题
- gulp-sass安装失败问题
- node-sass安装失败问题
- sass与compass简单教程
- c++操作MySQL数据库实例
- [YZOJ]P1232-异或游戏
- Object 类中的 equals方法
- 十一月一日课堂笔记
- java方法简单练习
- Sass技术问题与解决方法
- 设计模式——抽象工厂模式
- nodogsplash的内部机制分析
- 解决linux系统CentOS下调整home和根分区大小
- asp.net cookie 的用法
- 版本差异对比(四)-- 计算压缩文件夹及文件的MD5值
- MySQL:explain(执行计划)详解
- Spring Bean的生命周期(非常详细)
- linux--Ubuntu安装jdk