每日美图

Ruby

介绍

sass脚本语言对应的编译器是使用Ruby实现地，所以我们首先需要安装Ruby，以及sass所需要的gem包（就是Ruby支持Sass语法的扩容模块，gem是一款内置工具用于管理Ruby扩容模块）。

我知道这听上去挺奇怪的一个语言的编译器是另一个语言开发的，但这在程序界确实很普遍的，例如Python的编译器是C实现地，php解释器也是用C实现地，Java常用的JVM虚拟机底层也是C++语言编写。

安装

1.首先下载链接中文件夹内的资源https://pan.baidu.com/s/1ZmMfJzqO9oxO5HLe_ihBKQ

2.按照里面的文档与安装软件安装好Ruby

3.在命令行中执行ruby -v，sass -v，compass -v效果如下图

Ruby与Sass模块安装成功

WebStorm

介绍

摘录自百度百科

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

安装

1.首先下载连接中文件夹的资源

2.按照文件夹内的安装说明与安装软件进行安装

https://pan.baidu.com/s/1SsdZb1iwo1iXPd3zxu5rEg

Sass的解释器以及编译参数设置

打开webstom，选择File->Settings->Tools->File Watchers 选择添加 SCSS Watcher选项卡（ps:因为我们要学习Sass的语法），选项卡上的各参数配置如下

Name: SCSS

File type: SCSS Style Sheet

Scope: Project Files

Program: E:\devefiles\Ruby23-x64\bin\scss.bat（每个人都不一样，此为ruby的scss插件执行脚本的绝对路径在ruby安装目录的bin目录下）

Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css --style expanded（ps"添加的--style expanded是为了编译后可用于开发的css输出格式，我们下一次会看到为什么会这么设置啦，暂时先这样啦）

其它选项保持默认即可

新建一个Empty项目名称为ProjectDemo，并新建css文件类型为scss内容为

$width:5em;

#main {

width:$width;

}

会在scss文件同级目录下生成对应的css文件与css.map文件

#main {

width:5em;

}

/*# sourceMappingURL=Demo.css.map */

至此设置成功，下次就可以正式进入学习啦❤。

总结

1.sass的环境安装需要Ruby编译器与对应支持的sass、compass模块。

2.sass的开发环境需要编辑工具的编译器设置