everfoot的博客

Sass切换主题实战教程，通过全局变量、Mixin混合指令、嵌套、插值语句等Sass高级功能，轻松实现主题切换。本文详细介绍了如何定义主题变量、编写Mixin和函数，以及如何在HTML中实现主题切换。掌握这些技巧，轻松打造个性化主题，提升用户体验。

at-root可以使被嵌套的选择器或属性跳出嵌套。

使用.body {通过@forward暴露的成员在导入（@use）了暴露这些成员的模块的文件中便可使用。如：_library.exports.scss文件暴露了library文件则在styles.scss文件中后即可使用library文件的内容_library.exports.scss文件中通过lib-*后附加了前缀用于区分；使用时加上前缀个人疑问：为什么在文件中需要添加前缀，而在styles.scss文件中和不需要添加前缀？as lib-*是创建带前缀的命名空间，而as lib。

如果加载的模块内部有变量只想在模块内使用，可使用-或_定义在变量头即可* {margin: 0;padding: 0;body {// 报错 Error: Private members can't be accessed from outside their modules.default;padding: 0;@use引入同一个文件多次，不会重复引入，而@import会重复引入。

..提示：函数名function-name 与function_name 是相同的@return它只允许在@函数体中使用，并且每个@function必须以@return结束。当遇到@return时，它会立即结束函数并返回其结果。

if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。语法方式同js的if…else if …else看流程图例1例如，定义一个css的三角形@mixin声明使用html。

常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modules。

所有数据类型均支持相等运算==或!，此外，每种数据类型也有其各自支持的运算方式。

​ 在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。

* css 声明 */mixin是可以重复使用的一组CSS声明mixin有助于减少重复代码，只需声明一次，就可在文件中引用混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。使用参数时建议加上默认值。

通过本文，我们了解了 SASS 中 @import 指令的高级用法，包括基本导入、局部文件的概念以及嵌套导入的技巧。

在SASS中，变量以美元符号($)开头，可以包含字母、数字、下划线和横线，但不应以数字开头。变量定义后可以在全局或局部作用域中使用，全局变量定义在选择器外部或使用!global标志，局部变量则定义在选择器内部。SASS支持多种数据类型，包括数字、字符串、颜色、布尔型、空值、数组和maps。变量值可以是默认值，使用!default标志在变量未定义时提供默认值。

在接下来的系列更新中，我将逐步深入探讨Sass的强大功能和使用技巧。最终，我将通过一个简单的实践案例，学习如何利用Sass轻松实现主题切换功能。