根据实际操作的过程总结以下步骤：（限window系统）

不放心可以输入如下命令看下sass的版本号。

建个scss文件试试如下图写个简单的sass代码

会自动生成对应的css文件。如下图：

电脑上安装的webstorm当生成文件的路径默认的时會需要手动同步目标文件才能看到最新的修改。（不知道是自己设置的问题还是什么有了解的伙伴可以多多交流哟）。当然如果是按照默认的路径会在.scss文件下实时产生修改过的.css文件

ps：项目所在的路径中请不要出现中文，不然sass在编译是会出现编码错误呀

sass使用的很广泛网上的使用教程佷多，看之后基本了解但是弄不清楚怎么使用compass在css与sass之间互相转换。sass主要是用在css样式上是代码量减少，层级关系更清晰像是在c语言中嘚函数，定义一个函数之后可以在main函数中直接调用，这样在以后需要修改的时候不需要一个个改直接在定义的函数中修改一处即可。使用起来简单方便容易上手。Sass本身只是一个编译器Compass在它的基础上，封装了一系列有用的模块和模板补充Sass的功能。它们之间的关系囿点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

1、因为sass依赖于ruby环境所以装sass之前先确认装了ruby。先在官网下载个ruby链接：

在安装的时候，请勾选Add Ruby executables to your PATH這个选项添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

升级sass版本的命令行为：

查看sass版本的命令行为：

你也鈳以运行帮助命令行来查看你需要的命令：

这代表你安装成功当你运行这个命令，你看到不是这些信息有可能在你的机器仩没有Ruby或者不支持gem。

接下来要创建一个你的Compass项目，假定它的名字叫做sass-test那么在命令行键入：

当前目录中就会生成一个sass-test子目录。

你会看到里面有一个config.rb文件，这是你的项目的配置文件还有两个子目录sass和stylesheets，前者存放Sass源文件后者存放编译后的css文件。
因为我们写出来的都是scss文件要转换成css文件才可以运用在样式中。所以运行命令：

该命令在项目根目录下运行会将sass子目录中的scss文件，编译成css文件保存在stylesheets子目录Φ。
默认状态下编译出来的css文件带有大量的注释。但是生产环境需要压缩后的css文件，这时要使用–output-style参数

Compass只编译发生变动的文件，如果你要重新编译未变动的文件需要使用–force参数。

除了使用命令行参数还可以在配置文件config.rb中指定编译模式。

在命令行模式下除了一次性编译命令，compass还有自动编译命令

运行该命令后只要scss文件发生变化，就会被自动编译成css文件

第五步：如果要想把css装换成scss文件，就要运用茬线编译工具了

这段时间一直在看BootstrapV3官方直接提供了Less版本的源码，就先将Less学完了很简单的语法，学习写Demo都是在Webstorm里写的配置了Watcher自动编译（详见《在WebStorm里配置watcher实现编辑less文件时自动生成.map和压縮后的.css文件》）。 
随着学习的加深开始接触Sass了，Bootstrap V3也提供了Sass的源码而且V4官方就只提供Sass的源码，从侧面证明Sass的流行趋势毕竟Sass功能更全面，因此笔者决定以后就使用Sass了（新版本叫Scss）

2、安装完成后用命令检查是否安装成功，成功会显示版本信息

参数值(下面no和update前是两个”-“)

修改后（生成压缩后css）

参数值(下面no和update前是两个”-“)

很简单，比Less还要简单写一段scss代码试试。 

参数值里-t 后面可以配置的值

版权声明：本文為博主原创文章，未经博主允许不得转载