编写SASS代码
编写SASS代码
在css文件中新建一个index.scss 文件，注意后缀名为.scss ，表示这是一个使用Sass CSS语言
编写的文件。
在该文件中输入下面的代码：
@charset "utf-8";
$darkcolor : #2E2E2E; //定义一个颜色变量，值为#2E2E2E
$lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1
.main{
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
}
从代码中我们可以看到，sass语言中是支持// 注释的。
编译
我们书写好了SASS代码，现在需要将它编译成浏览器可识别的CSS代码。
现在，打开安装好的Koala，将你的工程文件夹拖动Koala的主界面中。
此时，如果不出意外，你的VSCODE中，已经生成了对应的CSS文件和一个Map文件。
你可以看一下index.css文件中的代码，是否就是你需要的代码呢？
使用SASS开发就是这么简单，不仅如此，只要你不关闭Koala，之后你对index.scss文件作出的任何改动，它都会直接自动编译到index.css中。
变量
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变
量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性
值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$ 符号来标识变量。
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又
一遍地重复父级样式：
/* css代码 */
.site-footer .footer-container .footer-menu {
display: flex;
width: 773px;
justify-content: space-between;
line-height: 3;
}
.site-footer .footer-container .footer-menu li {
font-size: 14px;
}
.site-footer .footer-container .footer-menu li a:hover {
color: #fff;
}
.site-footer .footer-container .footer-menu li:first-child {
font-size: 16px;
color: #eee;
}
这种情况下，使用SASS语言，每个选择器只需要书写一遍即可：
//SASS代码
.site-footer .footer-container .footer-menu {
display: flex;
width: 773px;
justify-content: space-between;
line-height: 3;
li{
font-size: 14px;
a:hover {
color: #fff;
}
&:first-child{
font-size: 16px;
color: #eee;
}
}
}
在上面的sass代码中，使用了&符号，该符号表示向当前选择器直接追加样式，比如：
.parent{
.other{
}
}
.parent{
&.other{
}
}
上面两段代码编译的结果分别如下：
.parent .other{
}
.parent.other{
}
