后端开发教程 - Java、Spring Boot 实战 - msg200.com
Sass 速成课程
🎥Sass 速成课程 [完整教程]
👏结论
🤷♂️什么是 Sass
Sass（全称Syntactically Awesome Style Sheets）是 CSS 的一个扩展，它允许你使用变量、嵌套规则、内联导入等功能。它还能帮助你保持代码条理，并让你更快地创建样式表。
使用Sass的好处是 sass 与所有版本的CSS兼容。
提示：在继续阅读之前，我建议您先阅读完整文章，然后观看文章底部我的 SASS 速成课程视频。该视频时长仅 15 分钟，其中我更详细地讲解了 SASS 的基本概念。这样，您的 SASS 记忆将比平时更持久。
01. 📦使用 Sass 变量存储数据
Sass与CSS不同的一个特性是它使用变量。它们可以被声明并设置为类似于 JavaScript 的变量来存储数据。
在 JavaScript 中，变量使用let和const 关键字声明。在Sass中，变量以$开头，后跟变量名。
这是一个真实的例子🔻
假设我们需要在不同的地方使用成功颜色“ green ”，并且不重复其名称。因此，我们需要编写如下代码：
$success-color: green;
然后我们在不同的地方使用这个全局变量，如下所示：
.success {
color: $sucess-color;
}
h3 {
color: $success-color;
}
变量很有用的一个例子是，当多个元素需要具有相同的颜色时。如果颜色发生变化，唯一需要编辑代码的地方就是变量值👌。
02. 🤏 使用 Sass 嵌套 CSS
Sass 允许您以遵循HTML相同视觉层次结构的方式嵌套CSS 选择器，这是组织样式表的一种有用方法。
通常情况下，每个元素都会被放在不同的行上来设置样式，就像这样👇
无嵌套：
footer {
background-color: #000;
}
footer ul {
list-style: none;
}
footer ul li {
display: flex;
}
嵌套后：
footer {
background-color: #000;
ul {
list-style: none;
li {
display: flex;
}
}
}
嵌套可以通过将子样式规则放置在相应的父元素中来帮助组织代码：
03.🧣使用 Mixins 创建可重用的 CSS
在Sass中，mixin是一组 CSS 声明。因此我们可以在样式表中重用它们。
众所周知，较新的 CSS 功能需要一些时间才能完全兼容所有浏览器。随着功能逐渐被浏览器采用，使用这些功能的CSS规则可能需要添加供应商前缀。例如，b* ox-shadow *属性。
不使用 Mixins：
.card {
-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 就派上用场了。Mixin 就像CSS的JavaScript函数。以下是如何编写一个 Mixins：
使用 Mixins：
@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。来看看👇
.card {
@include box-shadow(0px, 0px, 5px, #000);
}
.popup-card {
@include box-shadow(2px, 2px, 10px, #000);
}
04. 🔍使用@if和@else为样式添加逻辑
在 Sass 中，@if @else语句类似于 JavaScript。在 Sass 中，当我们在应用任何样式之前搜索特定条件时，它非常有用。像这样，
@mixin text-color($val) {
@if $val == danger {
color: red;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
那么我们需要在不同的地方应用这个 mixin：
h1 {
@include text-color(danger);
font-size: 2rem; // We can add additional properties.
}
.sucess-text {
@include text-color(success);
font-weight: bold; // We can add additional properties.
}
05. ➰Sass @Loop
与其他编程语言类似，Sass 也提供多种循环选项，包括@for循环、@each 循环和 @while 循环。这些循环是生成CSS代码的强大工具，因为您可以将代码生成延迟到可迭代任务中。
♾使用@for创建 Sass 循环：
在Sass中，@for有两种使用方式："从开始到结束" 或 "从开始到结束"。这两种方式的主要区别在于，"从开始到结束" 不包含结束数字，而"从开始到结束"包含结束数字。
这是一个从开始到结束的示例：🔻
@for $i from 1 through 5 {
.text-#{$i} { font-size: 10px * $i; }
}
#{$i}部分是将变量（i）与文本组合成字符串的语法。因此，当此 Sass 文件转换为CSS时，它将如下所示：
.text-1 {
font-size: 10px;
}
.text-2 {
font-size: 20px;
}
.text-3 {
font-size: 30px;
}
.text-4 {
font-size: 40px;
}
.text-5 {
font-size: 50px;
}
这就是为什么@for是一个强大的方法，只需一行代码就能创建超长网格布局或任何HTML元素。现在，您的网站有 5 种不同的文本大小，可用作CSS 类。
“从开始到结束”与“从开始到结束”相同。只需记住，“从开始到结束” 不包含结束数字。
从开始到结束的示例：🔻
@for $j from 1 to 6 {
.text-#{$j} {font-size: 10px * $j}
}
//The result will look like this:
.text-1 {
font-size: 10px;
}
.text-2 {
font-size: 20px;
}
.text-3 {
font-size: 30px;
}
.text-4 {
font-size: 40px;
}
.text-5 {
font-size: 50px;
}
在这里您可以看到最后一个计数（6）没有包含在此循环中。
🏹使用@each映射列表中的项目：
@each规则可以轻松地为列表中的每个元素或映射中的每个元素对生成样式或执行代码。每次迭代后，变量都会被赋值为列表或映射中的当前值。
不用地图看看：
@each $color in red, green, yellow {
.#{$color}-text {color: $color;}
}
看一下地图：
$colors: (color1: red, color2: green, color3: yellow);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
可以看到，该 map 的语法与 JavaScript 略有不同。因此，这里需要$key变量来引用 map 中的键。如果不提供$key，编译后的 CSS 将会使用 color1、color2……，并且永远不会触及实际值。
上述两个代码示例均转换为以下 CSS：
.red-text {
color: red;
}
.green-text {
color: green;
}
.yellow-text {
color: yellow;
}
🔐使用@while直到满足条件才应用样式：
在Sass中， @while指令与 JavaScript 没有区别。它会创建CSS 规则，直到满足某个条件为止。
之前，我们使用@for指令来创建不重复的重复任务。它也可以用@while 来实现。
看一看：
$i: 1;
@while $i < 6 {
.text-#{$i} { font-size: 10px * $i;}
$i: $i + 1;
}
因此，首先，我们取一个变量并将其设置为 1。接下来，我们使用@while指令检查条件，以便在 $i 小于 6 时创建不同大小的文本。确保在设置 CSS 规则后将$i增加1以避免无限循环。
06. 🗳使用 _Partial 将样式拆分成更小的块
部分文件 (partial) 是以下划线开头的 Sass 文件，例如：_partial.scss。下划线表示该文件是部分文件，不会被生成 CSS 文件。Sass 部分文件通常与 @import 指令一起使用。这是一种将相似的代码分组到模块中以便组织起来的好方法。
例如，如果所有文本颜色都保存在名为“ _textColor.scss ”的单独 sass 文件中，并且您希望它们位于main.scss模块中，则以下是在主 Sass 文件中使用它们的方法：
@import 'textColor'
请注意，您无需在 import 语句中指定下划线和文件扩展名。因为 Sass 会识别它是部分文件。将部分文件导入文件后，所有文本颜色、混合宏和其他代码均可使用。
07.💱将一组 CSS 样式扩展到另一个元素
@extend 是 Sass 的一项功能，允许类彼此共享一组属性。
例如，下面的 CSS 规则样式 .card 类块。它具有一些属性，如背景颜色、宽度、高度。
.card {
background-color: #fff;
width: 200px;
height: 150px;
}
现在您需要另一个名为“ .popup-card ”的卡片。它具有与基类“ .card ”相同的属性。但是我们需要在弹出卡片中添加一些属性。虽然可以从基类卡片复制粘贴到目标类中，但使用@extend指令可以实现更好的效果。
看一看：
.popup-card {
@extend .card;
border-radius: 5px;
background-color: #349db;
}
如你所见，我们可以通过重新赋值将基类中的样式覆盖到目标类中。否则，我们将拥有与基类“.card”相同的属性以及我们附加的样式。
🎥Sass 速成课程 [完整教程]
以下是您刚刚阅读的这篇文章的完整内容。请务必记笔记并尝试一下您的代码。否则，您很快就会忘记。我尽力用精美的视觉图像来教授 SASS/SCSS 的基本概念，以便您能够很好地记住它们。
👏结论
以上就是关于 Sass 的一些概念，你可能会想到它们。如果需要的话，你可能需要熟悉一些其他的小概念。或者，你也可以学习一下你刚刚从本文中学到的基础知识。
其中一些功能将来可能会被淘汰。因此，请关注 Sass 官方网站以获取最新更新。
如果您喜欢我的文章和解释视频，请务必订阅我的YouTube 频道。
欢迎发表评论并关注我以了解更多有关编程新闻的信息。
感谢您的阅读，祝您编码愉快:)
文章来源：https://dev.to/codewithshahan/sass-crash-course-in-a-book-3kg2