编写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{

}