scss 规则
- @use
- @use从其他 Sass 样式表中加载 mixins、函数和变量,并将来自多个样式表的CSS组合在一起。
- @forward
- @forward和@use是一样的,都是加载 Sass 样式表,并在加载的样式中,使其混入、函数和变量可用。不过@forward可以跨多个文件来组成一个 Sass 库,一般在写一个开源的 Sass 样式库的时候你可能会用到它,在项目中是不常用的。
- @import
- Sass 扩展了 CSS 的@import规则,能够导入 Sass 和 CSS 样式表,提供对 mixins、函数和变量的访问,并将多个样式表的 CSS 组合在一起。与普通的 CSS 导入不同,后者要求浏览器在呈现页面时发出多个 HTTP 请求,Sass 导入完全在编译期间处理。
- @mixin 与 @include
- Mixins允许您定义可以在整个样式表中重复使用的样式。它们可以很容易地避免使用非语义类,如.float-left,并在库中分发样式集合。使用@include规则将Mixins包含到当前上下文中。
- @function
- 函数允许您在 SassScript 值上定义复杂的操作,您可以在整个样式表中重用这些值。它们便于以可读的方式抽象出常见的公式和行为
- @extend
- @extend 它告诉 Sass 一个选择器应该继承另一个选择器的样式。当一个类扩展另一个类时,Sass 对所有匹配扩展器的元素进行样式设置,就好像它们也匹配被扩展的类一样。当一个类选择器扩展另一个类选择器时,它的工作方式与您将扩展类添加到 HTML 中已经具有扩展类的每个元素一样。
- @error
- 在编写带有参数的 mixin、函数时,您通常希望确保这些参数具有 API 期望的类型和格式。如果不是,则需要通知用户并且您的 mixin、函数需要停止运行。
- @warn
- 在编写 mixins 和函数时,您可能希望阻止用户传递某些参数或某些值。他们可能正在传递现在已弃用的遗留参数,或者他们可能以一种不太理想的方式调用您的 API。该@warn规则就是为此而设计的。
- @debug
- 有时,在开发样式表时,查看变量或表达式的值很有用。这就是@debug规则的用途:它被写入@debug<expression>,它打印出该表达式的值,以及文件名和行号。
- @at-root
- 该@at-root规则通常是编写的@at-root<selector>{...},并导致其中的所有内容都在文档的根部发出,而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套时。例如,假设您要编写一个匹配外部选择器和元素选择器的选择器。您可以编写一