本文共 2045 字，大约阅读时间需要 6 分钟。

1. sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby
   下载地址:
   注:安装过程中请注意勾选Add Ruby executables to your PATH添加到系统的环境变量.(也可以把D:\ToolSofts\Ruby23\bin自己的路径添加到环境变量中)
2. 安装完成后测试安装有没有成功

ruby - v//如安装成功会打印ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

3. Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件.

//1.删除原gem源gem sources --remove https://rubygems.org///2.添加国内源gem sources -a http://gems.ruby-china.com/--------------(2019.7.7测试成功)//3.测试是否替换成功gem sources -l//成功打印如下结果*** CURRENT SOURCES ***http://gems.ruby-china.com///如果没有成功就去找其它可用的源//4.安装sassgem install sass//5.安装compassgem install compass//6.安装成功测试sass -v结果>>Sass 3.x.x (Selective Steve)compass -v结果>>Compass 1.0.3 (Polaris)Copyright (c) 2008-2019 Chris EppsteinReleased under the MIT License.Compass is charityware.Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

4. 其它常用命令

• 更新

gem update sass

• 查看Sass版本

sass -v

• 查看sass帮助

sass -h

编译sass

命令行编译

1. 单文件转换命令

sass input.scss output.css

2. 单文件监听命令

sass --watch input.scss:output.css

3. 如果有很多的sass文件的目录,也可以监听整个目录

sass -watch app/sass:public/stylesheets

命令行编译配置选项

1. 编译格式

sass --watch input.scss:output.css --style compact

2. 编译添加调试map

sass --watch input.scss:output.css --sourcemap

3. 选择编译格式并添加调试map

sass --watch input.scss:output.css --style expanded --sourcemap

4. 开启debug信息

sass --watch input.scss:output.css --debug-info

四种编译排版

//未编译样式.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}

转载地址：http://mczfi.baihongyu.com/