SASS `@at-root`

本文介绍 SASS 的 @at-root。

我们将循序渐进地讲解从 @at-root 的基础用法到高级示例的全部内容。

YouTube Video

关于 SASS @at-root

@at-root 是 SASS 提供的一个指令，用于将嵌套的选择器或声明从当前嵌套移到父级作用域。借助该特性，你可以控制嵌套深度，更高效地生成符合预期的 CSS。

@at-root 的基本用法

SASS 的嵌套能提升代码可读性，但过深的嵌套可能会生成非预期的 CSS。通过使用 @at-root，你可以把特定的代码块排除在嵌套结构之外。

基本语法

1@at-root {
2  // Code to be output at the parent (root) scope
3}

示例用法

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

编译后的 CSS

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• 由于 @at-root，.nav-item 被输出在 .nav 之外。

在嵌套选择器中使用 @at-root

即使在深层嵌套中，使用 @at-root 也能把特定选择器移到根级。这样即使在复杂结构中也能输出可控的 CSS。

示例用法

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

编译后的 CSS

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• 通过 @at-root，.card-title 被输出在 .card-header 之外。

带参数的 @at-root

通过指定参数，可以更灵活地控制 @at-root。

without 参数

使用 without 参数时，输出会忽略指定的作用域。也就是说，你可以移除父级规则或媒体查询。

示例用法

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

编译后的 CSS

1.nav__item {
2  color: red;
3}

• 在此情况下，@at-root (without: media) 会排除媒体查询作用域，.nav__item 会在根级输出。

with 参数

使用 with 会在输出中只保留指定的作用域。当你想在保留特定作用域的同时输出到根级时，这很有用。

示例用法

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

编译后的 CSS

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) 在保留媒体查询结构的同时，将选择器移动到根级。

指定多个条件

您还可以同时指定多个作用域，用空格分隔。

示例用法

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

编译后的 CSS

1.global-style {
2  color: green;
3}

• 在此示例中，rule（常规选择器）和 media（媒体查询）都被排除了，因此 .global-style 不属于任何作用域，完整地在根级输出。当你希望在复杂嵌套中有意地定义全局样式时，这很有用。

与媒体查询结合使用

使用@at-root，你可以在媒体查询内部输出根级样式。这使你可以在组件级别定义响应式设计。

示例用法

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

编译后的 CSS

1.container-large {
2  width: 80%;
3}

• 借助 @at-root，你也可以在媒体查询内部输出根级样式。这样就能为各个断点轻松定义独立的全局样式。

@at-root 的使用场景

当你想在特定条件下将样式输出到根级时，@at-root 非常方便。在组件内部处理媒体查询或主题相关样式时尤其有用。

组件与主题的分离

通过 @at-root，即使在媒体查询内部也能生成独立的全局类。这让按组件组织主题和状态更加容易。

示例用法

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

编译后的 CSS

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• 在此示例中，虽然在 .card 内定义了深色主题的样式，@at-root 仍会生成单独的 .card-dark 类。这使你能够在不同主题之间灵活切换类。

注意

使用 @at-root 时，请注意以下几点。

1. 避免过度使用 @at-root 功能强大，但如果过度使用，会模糊你的嵌套意图。

2. 明确意图 对使用 @at-root 的原因留下注释，有助于其他开发者理解。

3. 注意作用域一致性 将输出移到根级可能会改变样式的依赖关系。要明确它适用于哪些元素。

4. 与其他 SASS 特性结合使用 将 @at-root 与 @mixin、@function 结合使用，可实现更灵活的 CSS 设计。

总结

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video