学习之前的默认基础：
基本了解HTML和CSS（至少已经使用它们构建过一个基本网页）。一个代码编辑器（推荐使用VS Code）。以及一个浏览器（推荐使用Chrome或Firefox）。为什么要使用SCSS？变量和计算： SCSS允许你使用变量来存储颜色、字体大小、间距等值。这使得在整个样式表中统一管理和修改这些值变得更加容易。此外，SCSS还支持数学计算，使得在样式中执行计算更加方便。嵌套： SCSS允许你在选择器内部嵌套规则，从而使样式的层次结构更加清晰和可读。嵌套可以提高代码的可维护性，特别是在处理复杂的选择器结构时。混合和继承： SCSS的混合（mixins）和继承功能允许你创建可重用的样式块，并在多个地方进行引用。这有助于减少代码的冗余，使样式表更加模块化和易于维护。函数： SCSS提供了内置的函数，用于操作颜色、执行计算等。此外，你还可以创建自定义函数，使得在样式中执行复杂的逻辑变得更加容易。模块化： SCSS支持使用局部文件，将样式表分割为更小的模块。这有助于更好地组织和管理项目的样式，使代码更易读和维护。可读性： SCSS的嵌套、变量和模块化等功能使样式表更易于阅读和理解。结构化的代码可以减少错误，提高代码的可维护性。虽然使用SCSS拥有上面的众多好处，但是我们在项目中选择使用SCSS还是CSS，是根据项目的需求、性质和个人偏好来决定的。如果我们在一个样式需求较小的小项目上工作，普通CSS可能就已经能够满足了我们的项目需求了。但是如果是遇见更大、更复杂的项目，使用SCSS可以为我们提供更多优势，有助于更高效和可维护的样式工作流程。
什么是SCSS？SCSS（Sassy CSS）是一种CSS预处理器，它扩展了标准CSS的功能并引入了许多有用的特性，使得编写和维护样式表更加高效和灵活。SCSS允许你在样式表中使用变量、嵌套规则、混合（mixins）、函数、继承等功能，从而提供了更好的组织性、模块化和可读性。
SCSS最早是在2006年由Hampton Catlin开发的，后来在2009年由Natalie Weizenbaum维护。这种语言的设计是为了解决编写复杂和可维护CSS时的一些限制和挑战。SCSS也被称为“SASS”，即Syntactically Awesome Stylesheets的缩写。
如何安装SCSS？可以通过在 VS Code Editor 中下载Live Sass Compiler扩展来安装SCSS。
还可以按照以下步骤安装扩展：
打开VS Code编辑器在键盘上按下Ctrl + P键入ext install glenn2223.live-sass
如何编写SCSS因为我们的Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，所以我们要需要把.scss文件编译为 .css文件。这时我们之前安装的Live Sass Compiler插件就派上用场了
我们可以通过点击状态栏上的“Watch Sass”，就可以进行对我们SCSS文件的编译。你也可以点击状态栏上的“Stop Watching Sass”来关闭编译。
在main.scss文件中编写的所有SCSS代码将会被编译到/dist/css文件夹中的main.css文件中。
SCSS特性--嵌套**（父选择器里可以嵌套子选择器）大多数网页开发者使用SCSS的一个原因是因为它具有嵌套特性。SCSS允许我们将CSS规则嵌套在父选择器内部。这有助于提高样式的可读性和组织性，特别是对于复杂的结构。
例如，我们创建一个带有两个元素的简单HTML页面；一个父元素和一个子元素。
代码语言：html复制
我们为这两个元素添加一些样式，并将它们嵌套在一起：
代码语言：scss复制.parent {
padding: 2rem;
background-color: red;
.child {
background-color: blue;
padding: 1rem;
}
}结果如下所示：
我们为父元素添加一个悬停状态的样式：（当我鼠标经过时父元素背景色变为黄色）
代码语言：scss复制.parent {
padding: 2rem;
background-color: red;
.child {
background-color: blue;
padding: 1rem;
}
&:hover {
background-color: yellow;
}
}SCSS提供了一个选择器可以选中当前元素的父元素，使用&表示。
在SCSS中声明变量
在SCSS中，我们可以使用美元符号（$）来声明变量。参考上面的HTML页面，以下是在SCSS中使用变量的简单方法：
代码语言：scss复制$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;
.parent {
padding: $padding-large;
background-color: $color-primary;
.child {
background-color: $color-secondary;
padding: $padding-small;
}
}在SCSS中声明变量是非常简单的，这些变量可以保存为局部文件，可以在任何地方使用。我们稍后会在文章中更详细地介绍局部文件。
在SCSS中使用混合（Mixins）混合（Mixin）是一种用于将一组CSS属性和规则封装在一个可重用的代码块中的特性。混合类似于函数，它允许你在样式表中定义一段代码，然后在需要的地方进行调用。这有助于减少代码的重复性，提高代码的可维护性。
下面是在SCSS中使用混合的方式：
定义混合（Mixin）：可以使用@mixin指令定义混合，如何在后面跟着一个名称和一组CSS属性和规则。以下是一个简单混合的示例：
代码语言：scss复制@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}混合的使用（Mixin）：可以通过使用@include指令将上面定义的混合在css样式中使用，后面跟着混合的名称和它所需的任何参数。以下是一个示例：
代码语言：scss复制.parent {
@include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.2));
}在上面的示例中，box-shadow混合被包含在.parent类中，应用了指定的box-shadow属性。
SCSS中的函数SCSS函数是另一个强大的特性，它使你能够执行计算、操作值和创建动态样式。SCSS提供了内置函数，同时还允许你创建自定义函数。SCSS中的函数的工作方式类似于编程语言中的函数，它们接受输入（参数）并返回值。
以下是SCSS中函数工作的示例；
内置函数：SCSS提供了许多内置函数，你可以使用它们来操作值、执行计算和修改样式。一些内置函数的示例包括：lighten()、darken()、rgba()、round()、percentage()、mix()等等。
代码语言：scss复制$color: #3498db;
.lighter-color {
background-color: lighten($color, 20%);
}自定义函数： SCSS还允许你使用 @function 指令创建自定义函数。自定义函数可以接受参数，执行计算或逻辑，并返回值。以下是一个将像素值转换为rem单位的自定义函数示例：
代码语言：scss复制@function px-to-rem($pxValue, $baseFontSize: 16px) {
@return ($pxValue / $baseFontSize) * 1rem;
}
.text {
font-size: px-to-rem(18px);
}SCSS中的局部文件（Partials）如何工作在SCSS中，局部文件是一种用于将样式代码模块化和组织化的技术。局部文件允许你将一个大的样式表分割成多个小的文件，以便更好地管理和维护代码。局部文件的文件名通常以一个下划线开头（例如 _partial.scss），并具有.scss扩展名。它们包含了可以使用 @import 指令包含和组合到主SCSS文件中的CSS代码段。
下面是SCSS中局部文件的工作方式：创建局部文件：局部文件用于保存样式的特定部分，例如排版、颜色、布局等。要创建局部文件，给它起一个以下划线开头并以.scss结尾的名称，例如 _variable.scss。在局部文件中定义样式：在局部文件中，我们可以像在常规的SCSS文件中一样定义样式。例如，_variables.scss 可能包含与颜色和字体相关的样式：导入局部文件： 要将局部文件中的样式包含到主SCSS文件中，你可以使用 @import 指令，不需要包含下划线和扩展名。当你导入一个局部文件时，在导入语句中不需要包含 _ 或 .代码语言：javascript复制scss。// _variables.scss
$base-font-size: 16px;
$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;
body {
font-family: Arial, sans-serif;
font-size: $base-font-size;
}
@import 'variables';
.parent {
padding: $padding-large;
background-color: $color-primary;
.child {
background-color: $color-secondary;
padding: $padding-small;
}
}
SCSS中的继承SCSS还可以通过使用 @extend 指令后跟元素选择器，实现属性从父元素继承到子元素。以下是SCSS中继承的工作方式：
代码语言：scss复制.parent {
display: flex;
justify-content: center;
align-items: center;
.child {
@extend .parent;
flex-wrap: wrap;
}
}在上面的代码中，.child 元素将继承 .parent 元素的所有属性，这类似于混合（mixins），但有一些细微的差别，因为混合更加灵活。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！