Windows 安装 Sass 教程

Sass是css预处理器的一种。可以在里面写变量、简单的逻辑程序、函数，使我们的代码复用性更强等等。

一、Ruby下载

因为sass依赖于ruby环境，所以在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

1、我这边下载的是2.6.6-1-x64的版本，可以根据自己的电脑选择。

image.png

2、下载后得到一个exe文件，双击安装

image.png

3、Ruby 安装文件下载好后，点击同意进行下一步。

image.png

4、在安装过程中，个人建议将其安装在 C 盘下，在安装过程中默认全选，我们就全选就好。一定要选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况哦）

image.png

5、Ruby 已经完成安装，点击Finsh即可

image.png

6、会跳出来一个cmd窗口，询问你应该安装哪些组件，如果不确定按Enter键就好了。那我们就按Enter键，cmd窗口就消失了。

image.png

二、安装Sass

1、Ruby 安装完成后，在window的开始菜单栏找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板。

image.png

2、在里面输入 ： gem install sass 。

image.png

3、查测 Sass

在命令终端输入 sass -v ，可以检测sass是否安装成功。

image.png

4、更新 Sass

维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？不会是卸载了重新安装吧（虽然安装也就是一个命令的事情）？ 其实不需要这么麻烦，只需要在命令终端执行：gem update sass 。我这边提示，没有更新，已是最新版本。

image.png

三、使用Sass

1、准备工作

一个html文件、一个后缀名为scss的文件、一个空的Css文件夹（用于放置编译成功的css）。如下图所示：

image.png

2、具体代码

SassDemo.html 文件 ，里面的css路径是引入最后编译成功的css，后面会讲到。

Demo.scss文件，下面是sass语法写的代码，不懂语法的小伙伴可以去看看其他的文章。

$color:#ccc;
$width:100px;
$height:100px;
$bgColor:red;
body{
    background-color:$color;
}
div{
    width: $width;
    height: $height;
    background-color: $bgColor;
    margin: 0 auto;
    margin-top: 20px;
}

3、编译Sass，生成css文件

我们这里使用cmd去编译，打开cmd
1、去scss所在目录

cd  /你的文件目录地址

2、将当前目录的Demo.scss编译成Demo.css，放在当前目录下面的Css文件夹中

sass Demo.scss:./Css/Demo.css

按下回车就你会发现文件夹中多了一个文件，我们的css文件夹中多出了 Demo.css 和 Demo.css.map。这时候就是编译成功了，我们就可以在html中引入Demo.css

image.png

image.png

效果图：

image.png

3、但是现在还有个小问题，我们scss中改变任何代码，都需要进行编译生成对应的css才行。那么我们就可以在编译前加上一个--watch。这样不用每次都去执行sass命令，会自动监听变化并自动编译。

sass --watch Demo.scss:./Css/Demo.css

每次scss中的代码变化，就会检测到，并更新到css中，这样就很方便了。大功告成，只要cmd不关闭，就会进行编译。

image.png

拓展

不想使用cmd编译的小伙伴可以打开vscode，安装插件 live-sass

image.png

具体使用方法，请参考官网的讲解，这里就不过多讲解。https://www.sass.hk/skill/sass154.html