sass的安装_sass webstrom expanded 编译排版格式-优快云博客

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

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

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.安装sass
gem install sass
//5.安装compass
gem install compass
//6.安装成功测试
sass -v
结果>>Sass 3.x.x (Selective Steve)
compass -v
结果>>
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2019 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

其它常用命令

更新

  gem update sass

查看Sass版本

  sass -v

查看sass帮助

  sass -h

编译sass

命令行编译

单文件转换命令

  sass input.scss output.css

单文件监听命令

  sass --watch input.scss:output.css

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

  sass -watch app/sass:public/stylesheets

命令行编译配置选项

编译格式

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

编译添加调试map

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

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

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

开启debug信息

  sass --watch input.scss:output.css --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}