Sass是Ruby语言写的,所以使用环境必须依赖Ruby,必须先安装Ruby,然后再安装Sass。放心,二者的语法并没有关系,不懂Ruby,也可以使用Sass。

如果是IOS系统,则已经安装好了Ruby,不需要重新安装,这里主要将Windows系统。

一:安装

到官网下载Ruby安装文件,版本随意。(链接:http://rubyinstaller.org/downloads?utm_source=caibaojian.com)

点击安装文件按照提示安装,安装位置建议安装到C盘,安装最后一步建议选择第二项,如下图:


gem install sass太慢 sass安装使用的步骤是什么_Ruby

安装完成在菜单中找到安装的ruby,点击启动命令控制面板,如下图:

gem install sass太慢 sass安装使用的步骤是什么_css_02

在命令控制面板中输入:gem install sass 回车,等待安装Sass,安装成功如下图(图片来源于网络)。

gem install sass太慢 sass安装使用的步骤是什么_Ruby_03

二:使用

1、Sass源文件转译成CSS文件

如果你的项目文件位置不在C盘,要更改命令行的默认访问路径,如d盘,输入: d: 回车,如下图:

gem install sass太慢 sass安装使用的步骤是什么_Ruby_04

输入:cd +放置样式表的文件夹路径,回车,这里放在style文件夹下,如下图:

gem install sass太慢 sass安装使用的步骤是什么_sass_05

在style下创建sass文件,如test.scss(.sass与.scss功能特性都一样,只是书写规则有所不同,sass要求更规 范,一般 用.scss就好),在命令控制面板中输入 sass test.scss  test.css 回车即生成.test.css.map和test.css两个文件,如图:

gem install sass太慢 sass安装使用的步骤是什么_Ruby_06

gem install sass太慢 sass安装使用的步骤是什么_gem install sass太慢_07

2、文件监听

单个文件的监听,输入:sass  --watch  test.sass:test.css 回车即监听成功,如下图。这样在.scss文件中写样式时,与其 对应的.css文件中就会自动编译出对于的样式代码。

gem install sass太慢 sass安装使用的步骤是什么_Sass_08

多个文件的监听,是文件夹与文件夹之间的监听,例如在style目录下创建一个文件夹sass,用于放置sass文件,css文件 仍在style目录下。命令控制面板中的默认访问路径去掉style路径,监听命令 为:sass  --watch  style/sass:style 回车即 可监听成功如下图:

gem install sass太慢 sass安装使用的步骤是什么_Sass_09

gem install sass太慢 sass安装使用的步骤是什么_sass_10

至此,就可以在.scss文件中编写样式代码啦,要注意的是,在页面中当然还是引用对应的.css文件。