一篇文章让你完全掌握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，以避免无限循环。
" class="reference-link">
将一组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，除了新的风格
小咪咪
刺骨的言语ヽ痛彻心扉
淩亂°似流年
àì夳堔傛蜴生んèń
还没有评论，来说两句吧...