什么是 @-Rules

发布时间：2023-05-26 13:41:02 所属栏目：教程来源：

导读：什么是 @-Rules 呢？其实就是以 @ 开头的一些规则，在 CSS 中有很多 @-Rules 是你经常用的，比如 @media 、@font-face 等等；那么在 Sass 中除了支持 CSS 所有的 @-Rules 外，Sass 还提供了一些扩展的 @ 规则，前面的

什么是 @-Rules 呢？其实就是以 @ 开头的一些规则，在 CSS 中有很多 @-Rules 是你经常用的，比如 @media 、@font-face 等等；那么在 Sass 中除了支持 CSS 所有的 @-Rules 外，Sass 还提供了一些扩展的 @ 规则，前面的章节我们已经讲了很多了，比如 @if 、@for、@mixin 等等。

使用场景
在 Sass 中不同的 @-Rules 有不同的语法和使用场景，我们结合使用场景来过一遍 Sass 中的 @-Rules 。

@use 和 @import
在前面的章节中我们讲过 @use 和 @import ，回忆一下，它们都是用于加载文件内容的（包括文件中的 mixin 、函数和变量等），还记不记得我们建议使用 @use 来替代 @import，所以说 @use 承载了 @import 的功能，它的语法如下：

@use 'my/a';
@use 'my/b';

@forward
@forward 的工作原理和 @use 基本相同，都是用于加载文件内容的，不过 @forward 可以跨多个文件来组成一个 Sass 库，一般在写一个开源的 Sass 样式库的时候你可能会用到它，在项目中是不常用的。

在这里我们举个简单的例子来感受下，假如我在 src/a.scss 中定义了一个 mixin ，代码如下所示：

// src/a.scss
@mixin bor {
   width: px;
   height: px;
}
然后我在 b.scss 中使用 @forward 来导入它，代码如下所示：

// b.scss
@forward 'src/a';
最终呢，我是想在和 b.scss 同级的 c.scss 文件中使用 a.scss 中的 mixin，那么在 c.scss 中我们可以不直接导入 a.scss，我们通过导入 b.scss 也可以实现，c.scss 中的代码如下所示：

// c.scss
@use "b";
li {
   // 应用 a.scss 文件中的 mixin
   @include bbor;
}
从上面的代码中可以看出来我们可以通过 @forward 来组合多个文件的内容，然后提供给其他的样式中使用，类似于转发的功能，同时它还可以控制某些成员的私有访问等，不过这个一般是写大型的样式库才会用到，在入门教程中我们不做过多的探讨。

@mixin 和 @include
@mixin 我们在之前的 Sass 混合指令章节做了详细的讲解，混合指令的出现使你可以定义在样式表中重复使用的样式，这可以使你免去编写过多重复的样式，而且在混合指令 @mixin 中你也可以做一些逻辑处理。而 @include 是用来引用混合指令的。

@function
@function 在前面的 Sass 函数指令章节中我们也做了详细的讲解，回忆一下，它也叫自定义函数让你可以容易的处理各种逻辑和定义复杂的操作，而且你可以在任何需要的地方复用函数，这使得我们可以抽离出来一些常见的公式或者逻辑。

@extend
@extend 就是我们说的 Sass 中的继承，在 Sass 继承章节，回忆一下，在我们编写样式的时候，很多情况下我们几个不同的类会有相同的样式代码，同时这几个类又有其自己的样式代码，这是我们就可以通过 Sass 提供的继承 @extend 来实现。

@error
@error 规则在此处是第一次讲解，它是干嘛用的呢？在编写 Sass 函数或者 mixin 的时候，通常需要确保这些能提供正确的类型或者格式，如果没有的时候需要通知用户并停止函数或 mixin 的运行，这时就用到的 @error ，我的理解是它就像我们写 javascript 时用到的 throw new Error() 。我们举个简单的例子看下：

@function my($str) {
   @if $str != 'a' || $str != 'b' {
       // 此处会抛出错误信息并停止函数的运行
       @error "This is a error！"
   }
}

@warn
上面我们讲了 @error ，@warn 和它的使用方式是相同的，不同的是 @warn 是打印信息，以及指示当前的函数或 mixin 的调用堆栈追踪，并不会停止函数或 mixin 的运行，它的写法如下：

@function my($str) {
   @if $str != 'a' || $str != 'b' {
       // 此处不会停止函数的运行
       @warn "This is a message！"
   }
}

@debug
一看这个 debug 我们就知道，它是用来调试的，在 javascript 中也是这样。在 Sass 中我们可以使用 @debug 来打印表达式的值以及文件名和行号，这仅是在你开发时期调试用，对实际的样式并没有什么太大的帮助，你只要记住需要调试 Sass 代码就用它，不过一般我们在实际的项目中使用它是很少很少的。

@at-root
回一下前面的章节中我们讲解的 Sass 嵌套，很常用的功能。在使用嵌套的时候你可以使用 @at-root 取消嵌套规则，我们举个例子看下：

.a {
width: px;
.b {
width: px;
}
.c {
width: px;
// 取消嵌套规则
@at-root f {
width: px;
}
}
// 取消嵌套规则
@at-root e {
width: px;
}
}
上面这段代码将会被转换为如下的 CSS 代码：

.a {
width: px;
}
.a .b {
width: px;
}
.a .c {
width: px;
}
.f {
width: px;
}
.e {
width: px;
}
通过上面的代码我们可以看出来，在 .f 和 .e 处我使用了 @at-root ，那么就不会对它们俩应用嵌套规则，@at-root 的使用场景视情况而定，灵活使用。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!