湫的碎碎念SCSS
SCSS（Sassy CSS）是一种 CSS 预处理器，它提供了许多强大的功能来帮助你更高效地编写和维护 CSS 代码。
SCSS 由 SASS 项目开发，是 SASS 的新版本，与 SASS 相比，SCSS 的语法更接近 CSS，使用起来更方便。
SCSS 文件以 .scss 为扩展名，语法类似于 CSS，但提供了一些额外的功能，例如变量、嵌套、混合、函数、循环等。使用 SCSS，你可以使用这些功能来编写更简洁、更灵活的 CSS 代码。
SCSS 文件需要通过编译器转换为 CSS 文件，才能在浏览器中使用。常用的编译器有 sass、node-sass 和 dart-sass 等。
🔗 官方文档：SCSS Documentation
嵌套
在 SCSS 中，你可以使用嵌套来组织你的样式，使代码更具可读性。例如，你可以嵌套一个元素的样式在另一个元素的样式内，如下所示：
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
&:hover {
color: red;
}
}
}
}
}在上面的代码中，我们嵌套了 ul、li 和 a 元素的样式在 nav 元素的样式内，这使得代码更具可读性，也更容易维护。
提示：SCSS 嵌套中的 & 表示上一级选择器。
变量
在 SCSS 中，你可以使用 $ 符号来声明变量。例如，你可以声明一个名为 $font-size 的变量来存储字体大小：
$font-size: 16px;
body {
font-size: $font-size;
}在上面的代码中，我们声明了一个名为 $font-size 的变量，并将其设置为 16px。然后，我们将变量 $font-size 用于设置 body 元素的字体大小。
你还可以使用变量来存储颜色值，例如：
$primary-color: #333;
a {
color: $primary-color;
}这样，如果你想要更改主色调，只需更改 $primary-color 变量的值即可。
流程控制
SCSS 中的流程控制是使用 @if、@else if 和 @else 关键字控制代码执行流程的语句。
@if 语句的语法如下：
@if <condition> {
// 条件成立时要执行的代码
}其中，<condition> 是一个布尔表达式，如果表达式的值为 true，则执行条件成立时要执行的代码。
例如，你可以这样使用 @if 语句：
$font-size: 16px;
@if $font-size > 20px {
body {
font-size: $font-size;
}
}你还可以使用 @else 关键字提供条件不成立时的备选代码：
$font-size: 16px;
@if $font-size > 20px {
body {
font-size: $font-size;
}
} @else {
body {
font-size: 20px;
}
}你还可以使用 @else if 语句提供更多的条件分支：
$font-size: 16px;
@if $font-size > 20px {
body {
font-size: $font-size;
}
} @else if $font-size > 15px {
body {
font-size: 15px;
}
} @else {
body {
font-size: 14px;
}
}循环
SCSS 提供了三种循环控制结构，分别是 @for、@each 和 @while。
for循坏
@for 循环用于重复执行一段代码多次。它的语法如下：
@for $i from <start> through <end> {
// 循环体
}其中，$i 是一个循环变量，<start> 和 <end> 是起始和结束值。循环变量从起始值开始，逐步增加，直到到达结束值，每次增加的值为 1。
例如，下面的代码会生成 5 个类名为 .item-1 到 .item-5 的选择器：
@for $i from 1 through 5 {
.item-#{$i} {
// 样式规则
}
}@each循环
@each 循环用于遍历一个列表中的每个元素。它的语法如下：
@each $var in <list> {
// 循环体
}其中，$var 是循环变量，<list> 是要遍历的列表。每次循环，循环变量都会被赋值为列表中的一个元素。
例如，下面的代码会生成 3 个类名为 .red、.green 和 .blue 的选择器：
@each $color in red, green, blue {
.#{$color} {
color: $color;
}
}
// 或者把颜色值放在一个变量中：
$basic-colors: red, green, blue;
@each $color in $basic-colors {
.#{$color} {
color: $color;
}
}你还可以使用 @each 循环来遍历一个映射（map）中的每个元素：
$colors: (
red: #ff0000,
green: #00ff00,
blue: #0000ff
);
@each $name, $color in $colors {
.#{$name} {
color: $color;
}
}在这种情况下，循环变量分别被赋值为映射中的键和值。
@while循环
@while 循环用于在满足特定条件时重复执行一段代码。它的语法如下：
@while <condition> {
// 循环体
}其中，<condition> 是一个布尔表达式，如果表达式的值为 true，则执行循环体，否则退出循环。
例如，下面的代码会生成 5 个类名为 .item-1 到 .item-5 的选择器：
$i: 1;
@while $i <= 5 {
.item-#{$i} {
// 样式规则
}
$i: $i + 1;
}在使用循环时，需要注意一些细节，例如循环变量的命名、循环条件的设置等。
混合（Mixins）
混合（Mixins）是 SCSS 中的一种特性，允许你定义一组样式，并将其复用到多个地方。例如，你可以定义一个名为 rounded-corners 的混合来给元素添加圆角：
@mixin rounded-corners {
border-radius: 5px;
}
button {
@include rounded-corners;
}在上面的代码中，我们使用 @mixin 声明了一个名为 rounded-corners 的混合，然后使用 @include 将混合应用到 button 元素上。
函数
函数是 SCSS 中的另一种特性，允许你定义一个函数来执行特定的计算，并返回结果。例如，你可以定义一个名为 lighten 的函数来使颜色变浅：
@function lighten($color, $amount) {
$hsl: hsl(hue($color), saturation($color), lightness($color) + $amount);
@return hsla($hsl, alpha($color));
}在上面的代码中，我们定义了一个名为 · 的函数，该函数接受两个参数：$color 和 $amount。
函数的主体部分（也就是大括号内的代码）包含了两个语句：
第一个语句使用了
hsl函数将颜色转换为 HSL 格式，并使用hue、saturation、lightness函数获取颜色的色调、饱和度、亮度，最后使用$amount参数调整亮度。第二个语句使用了
hsla函数将 HSL 值转换为 RGBA 格式，并使用alpha函数获取颜色的 alpha 值（即透明度）。
最后，使用 @return 语句将函数的结果（转换后的RGBA颜色值）返回。
总的来说，这段代码定义了一个函数，该函数可以将给定的颜色变浅，且保留原有的透明度。你可以使用这个函数来轻松地调整颜色的亮度，而无需手动计算 HSL 值。
常用内置函数
SCSS 提供了许多内置函数，可以帮助你在 SCSS 中进行各种计算。下面是一些常用的内置函数：
percentage($value)：将给定的数字转换为百分比。round($value)：对给定的数字进行四舍五入。ceil($value)：对给定的数字进行向上取整。floor($value)：对给定的数字进行向下取整。abs($value)：计算给定数字的绝对值。min($value1, $value2, ...)：计算给定数字中的最小值。max($value1, $value2, ...)：计算给定数字中的最大值。hue($color)：获取给定颜色的色调值（HSL 格式）。saturation($color)：获取给定颜色的饱和度值（HSL 格式）。lightness($color)：获取给定颜色的亮度值（HSL 格式）。alpha($color)：获取给定颜色的 alpha 值（即透明度）。rgba($color, $alpha)：将给定颜色转换为 RGBA 格式，并设置 alpha 值。hsl($hue, $saturation, $lightness)：将给定的 HSL 值转换为颜色。hsla($hue, $saturation, $lightness, $alpha)：将给定的 HSLA 值转换为颜色。
这些函数可以帮助你在 SCSS 中进行各种计算，例如转换颜色的格式、计算数字的百分比、调整数字的精度等。这些函数可以帮助你在 SCSS 中更加高效地进行计算，并使你的代码更具可维护性。例如，你可以使用 percentage 函数将数字转换为百分比，使用 round 函数对数字进行四舍五入。
SCSS 还提供了许多其他内置函数，例如：
red($color)：获取给定颜色的红色值（RGB 格式）。green($color)：获取给定颜色的绿色值（RGB 格式）。blue($color)：获取给定颜色的蓝色值（RGB 格式）。mix($color1, $color2, [$weight])：混合两种颜色。grayscale($color)：将给定颜色转换为灰色。complement($color)：获取给定颜色的补色。invert($color)：反转给定颜色的颜色值。unquote($string)：去除字符串两边的引号。quote($string)：在字符串两边添加引号。type-of($value)：获取给定值的数据类型。unit($number)：获取给定数字的单位。color($color)：将给定的颜色转换为 SCSS 颜色对象。str-length($string)：计算给定字符串的长度。str-insert($string, $insert, $index)：在给定字符串的指定位置插入另一个字符串。str-index($string, $substring)：搜索给定子字符串在给定字符串中的位置。str-slice($string, $start-at, $end-at)：从给定字符串中截取一段字符。to-upper-case($string)：将给定字符串转换为大写。to-lower-case($string)：将给定字符串转换为小写。map-get($map, $key)：获取给定映射中指定键对应的值。map-merge($map1, $map2)：合并两个映射。map-remove($map, $key)：从给定映射中删除指定键。map-keys($map)：获取给定映射中的所有键。map-values($map)：获取给定映射中的所有值。
另外，SCSS 中没有提供用于替换字符串的方法，我们可以自己实现它：
/// 将 `$string` 中的 `$search` 替换为 `$replace`
/// @param {String} $string - 初始字符
/// @param {String} $search - 要替换的子字符串
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$string: '#{$string}';
$search: '#{$search}';
$index: str_index($string, $search);
@if $index {
@return str_slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// 使用：
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
// 结果
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}这些函数可以帮助你更加高效地编写 SCSS 代码，并使你的代码更具可维护性。