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，后面会讲到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./Css/Demo.css">
</head>
<body>
<div>
</div>
</body>
</html>
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
image.png
拓展
不想使用cmd编译的小伙伴可以打开vscode，安装插件 live-sass
image.png
具体使用方法，请参考官网的讲解，这里就不过多讲解。https://www.sass.hk/skill/sass154.html
网友评论