1.安装Ruby
Sass是基于Ruby语言来工作的,必须先安装Ruby,然后再安装Sass。
Ruby官网链接:https://rubyinstaller.org/
1.随意选择一个版本
2.解压后安装
3.选择(I accept the License) 点击next
4.勾选点击安装
5.安装完成,然后通过Ruby安装Sass主要文件依赖
2.安装sass
6.点击程序运行Ruby窗口,在DOS中输入以下命令:
gem install sass
7.窗口出现以下命令,代表已经安装成功
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
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里面
12.ok,此时我们已经看到编译成功了,在对应的css文件中已经同步了scss代码
到此已经结束了整个编译和同步过程,是不是很方便呢