Sass中的at-root指令有什么作用？

"在Sass中，@at-root指令的作用是让样式规则跳出当前选择器的嵌套，回到最外层的选择器。这在需要在嵌套的规则中生成全局样式时非常有用。通常情况下，在Sass中，嵌套的规则会继承其父选择器，但有时我们需要生成一个与当前选择器无关的全局样式。

举个例子，假设我们有以下Sass代码：

.navbar {
  background-color: blue;

  .nav-link {
    color: white;
  }
}

编译后的CSS将是：

.navbar {
  background-color: blue;
}

.navbar .nav-link {
  color: white;
}

现在假设我们希望.nav-link的样式不要嵌套在.navbar中，而是在全局范围内。这时我们可以使用@at-root指令：

.navbar {
  background-color: blue;

  @at-root .nav-link {
    color: white;
  }
}

这样编译后的CSS将变成：

.navbar {
  background-color: blue;
}

.nav-link {
  color: white;
}

可以看到，.nav-link的样式规则已经跳出了.navbar选择器的嵌套，成为了全局样式。这种功能在编写Sass样式时，特别是在编写可复用的组件样式时非常有用。"