1.安装Ruby

Sass是基于Ruby语言来工作的,必须先安装Ruby,然后再安装Sass。
Ruby官网链接:https://rubyinstaller.org/

1.随意选择一个版本

项目中安装less和sass_javascript


2.解压后安装

项目中安装less和sass_css3_02


3.选择(I accept the License) 点击next

项目中安装less和sass_javascript_03


4.勾选点击安装

项目中安装less和sass_css_04


5.安装完成,然后通过Ruby安装Sass主要文件依赖

项目中安装less和sass_css_05

2.安装sass

6.点击程序运行Ruby窗口,在DOS中输入以下命令:

gem install sass

7.窗口出现以下命令,代表已经安装成功

项目中安装less和sass_jquery_06


8.可以自由查看Ruby版本号,Sass版本号

ruby -v  sass -v

9.sass的具体使用

上一个小案例demo,在磁盘的任何一个位置建一个scss后缀结尾的文件,我就建demo.css了。先在里面随便写点css样式,然后改成后缀以.scss结尾的文件,写样式之前一定先加上@charset "utf-8";不然可能会出现编译失败,乱码的情况

然后在Ruby窗口下切换到自己的创建文件的目录之下,运行以下命令:意思也就是将scss文件编译成css文件

sass demo.scss demo.css

项目中安装less和sass_项目中安装less和sass_07


10.到此步骤已经将Scss文件成功转化为Css文件了

我们可以看到文件夹中生成了demo.css和demo.css.map文件,以及.sass-cache文件夹(这个是编译的时候自动生成的,可以删除不影响功能),map文件是整个scss的路径,只要scss发生变化直接映射到css文件上面,无需自己去手动编译。我们引入的是demo.css文件。接下来只需监听整个css文件的差异了然后同步编译到demo.css文件上面。

11.Ruby窗口进入demo.scss文件夹下,输入以下命令:

sass --watch demo.scss:demo.css //对当前文件夹下demo.scss监听,并自动编译生成demo.css

出现以下代码提示,就表示已经监听成功了,那么我们在开发工具里试试,随便改动一下代码,看看能否编译自动同步到css里面

项目中安装less和sass_jquery_08


12.ok,此时我们已经看到编译成功了,在对应的css文件中已经同步了scss代码

项目中安装less和sass_css_09


到此已经结束了整个编译和同步过程,是不是很方便呢

项目中安装less和sass_项目中安装less和sass_10