1.下载ruby( 注意勾选Add Ruby executables to your PATH)
2.找到安装目录 打开Start Command Prompt with Ruby
3.淘宝镜像 安装sass
移除默认源 gem sources --remove https://rubygems.org/
添加淘宝源 gem sources -a https://ruby.taobao.org/
查看源 gem sources -l
4.通过gem安装sass
安装 --- gem install sass
升级 --- gem update sass
查看命令 --- sass -v
帮助命令 --- sass -h
5.sass有两种后缀名文件sass和scss:推荐使用scss
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
6.命令行编译
单文件转换
sass index.scss index.css
单文件监听
sass --watch index.scss:index.css
文件夹监听
sass --watch sass/index.scss:css/index.css
7.命令行其他配置
常用的有--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就不太用了。
网友评论