一篇文章让你完全掌握Sass，不只是学会而已哦！！！
使用sass变量存储数据
Sass与CSS的不同之处之一是它使用变量。与JavaScript相似，它们被声明并设置为存储数据。
在JavaScript中，使用let和const关键字定义变量。在Sass中，变量以开头，$后跟变量名称。
这是几个例子：
$main-fonts: Arial, sans-serif;
$headings-color: green;
//To use variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}变量有用的一个例子是，当多个元素需要使用相同的颜色时。如果该颜色发生更改，唯一的代码编辑位置就是变量值。
使用Sass嵌套CSS
Sass允许嵌套CSS规则，这是组织样式表的一种有用方法。
通常，每个元素都指向不同的行以对其进行样式设置，如下所示：
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
对于大型项目，CSS文件将具有许多行和规则。在这里，嵌套可以通过将子样式规则放置在各自的父元素中来帮助组织代码：
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}使用Mixins创建可重用的CSS
在Sass中，mixin是一组CSS声明，可以在整个样式表中重复使用。
较新的CSS功能需要一段时间才能被完全采用并准备在所有浏览器中使用。将功能添加到浏览器后，使用这些功能的CSS规则可能需要供应商前缀。考虑“盒子阴影”：
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}要为所有具有的元素重新编写此规则box-shadow，或者更改每个值以测试不同的效果，需要进行大量键入。Mixins就像CSS的功能。这是如何写一个：
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}定义以@mixin自定义名称开头。的参数（$x，$y，$blur，和$c在上面的例子）是可选的。现在box-shadow，只要需要一条规则，仅需一行调用mixin即可替换，而不必键入所有供应商前缀。用@include指令调用mixin ：
div {
@include box-shadow(0px, 0px, 4px, #fff);
}使用@if和@else为样式添加逻辑
@ifSass中的指令对于测试特定情况非常有用-就像ifJavaScript中的语句一样工作。
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}就像在JavaScript中一样，@else if并@else测试更多条件：
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}使用@for创建Sass循环
该@for指令在循环中添加样式，与forJavaScript中的循环非常相似。
@for有两种用法：“从头开始”或“从头到尾”。主要区别在于“开始到结束”不包括结束号作为计数的一部分，而“开始至结束”包括结束号作为计数的一部分。
这里是一个开始通过结束例如：
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}该#{$i}部分是将变量（i）与文本组合成字符串的语法。当Sass文件转换为CSS时，如下所示
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}这是创建网格布局的有力方法。现在，您有十二个用于CSS类别的列宽选项。
使用@each映射列表中的项目
最后一个挑战显示了@for指令如何使用起始值和结束值循环一定次数。Sass还提供了@each遍历列表或映射中每个项目的指令。在每次迭代中，变量将从列表或映射中分配给当前值。
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}映射的语法略有不同。这是一个例子：
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}请注意，$key需要变量来引用映射中的键。否则，编译后的CSS将有color1，color2...在里面。上面的两个代码示例都转换为以下CSS：
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}应用样式，直到使用@while满足条件为止
该@while指令是具有与JavaScriptwhile循环类似功能的选项。它创建CSS规则，直到满足条件为止。
该@for挑战举了一个例子来创建一个简单的网格系统。也可以使用@while。
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}首先，定义一个变量$x并将其设置为1。接着，使用该@while指令来创建网格系统而 $x小于13设置CSS规则后width，$x加1，以避免无限循环。
将一组CSS样式扩展到另一个元素
Sass具有一项称为的功能extend，可以轻松地从一个元素借用CSS规则，然后在另一个元素上构建CSS规则。
例如，以下CSS规则块为一个.panel类设置样式。它有一个background-color，height和border
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}现在，您需要另一个名为的面板.big-panel。它具有与相同的基本属性.panel，但还需要width和font-size。可以从复制和粘贴初始CSS规则.panel，但是随着添加更多类型的面板，代码将变得重复。该extend指令是重用为一个元素编写的规则，然后为另一个元素添加更多规则的简单方法：
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}在.big-panel将具有相同的属性.panel，除了新的风格