提升 @at-root

约 845 字大约 3 分钟

2025-04-12

Sass 中的 @at-root 指令用于将嵌套的规则提升到样式表的根层级，从而避免生成冗余的嵌套选择器。它特别适合需要突破当前嵌套层级的场景，例如生成独立的选择器或配合 BEM 命名规范使用。以下是详细用法和示例：

一、基础用法

@at-root 会将内部的规则直接输出到根层级，脱离父选择器的嵌套关系。

示例：

.parent {
  color: red;

  @at-root {
    .child {
      color: blue;
    }
  }
}

编译后：

.parent {
  color: red;
}
.child {
  /* 直接出现在根层级 */
  color: blue;
}

二、与插值语法结合

可与 #{ ... } 插值语法结合，动态生成选择器。

$modifier: "--active";

.element {
  @at-root {
    &__title#{$modifier} {
      font-weight: bold;
    }
  }
}

编译后：

.element__title--active {
  /* 脱离父选择器生成独立规则 */
  font-weight: bold;
}

三、与 `with` / `without` 参数配合

通过参数控制是否保留某些父选择器上下文。可指定的类型（通过 with 或 without 控制）：

rule：普通 CSS 规则嵌套（如 .parent { .child {} }）
media：媒体查询（@media）
supports：特性查询（@supports）
all：所有上下文类型（等同于不指定参数时的默认行为）

1. `@at-root (with: ...)`

保留指定类型的父选择器（如 media 或 supports）。

@media screen and (min-width: 768px) {
  .component {
    @at-root (with: media) {
      .title {
        color: red;
      }
    }
  }
}

编译后：

@media screen and (min-width: 768px) {
  .title {
    /* 保留媒体查询上下文 */
    color: red;
  }
}

2. `@at-root (without: ...)`

排除指定类型的父选择器（默认排除所有）。

.section {
  @supports (display: grid) {
    @at-root (without: supports) {
      .grid-item {
        padding: 10px;
      }
    }
  }
}

编译后：

.grid-item {
  /* 完全脱离 @supports 和 .section 的嵌套 */
  padding: 10px;
}

四、典型应用场景

1、生成独立工具类

// 脱离上下文生成工具类
@at-root {
  .text-center {
    text-align: center;
  }
  .mt-20 {
    margin-top: 20px;
  }
}

2、配合 BEM 规范

.block {
  @at-root {
    &--modifier {
      /* 生成 .block--modifier */
      border: 1px solid;
    }
    &__element {
      /* 生成 .block__element */
      padding: 10px;
    }
  }
}

编译后：

.block--modifier {
  border: 1px solid;
}
.block__element {
  padding: 10px;
}

3、突破混入（Mixin）的嵌套

@mixin hover-effect {
  &:hover {
    @content;
  }
}

.button {
  @include hover-effect {
    @at-root {
      /* 避免生成 .button:hover .icon */
      .icon {
        opacity: 1;
      }
    }
  }
}

编译后：

.button:hover .icon {
  /* 不使用 @at-root 时的默认结果 */
  opacity: 1;
}

/* 使用 @at-root 后的结果 */
.button:hover {
  /* .icon 规则会被提升到根层级 */
}
.icon {
  /* 实际需要结合其他语法调整 */
  opacity: 1;
}

五、注意事项

嵌套上下文
@at-root 仅突破选择器嵌套，不会突破 @media 或 @supports 等指令，除非使用 with/without 参数。

与父选择器的关系
使用 & 符号时，仍然会继承父选择器的上下文：

.parent {
  @at-root {
    .child & {
      /* 生成 .child .parent */
      color: red;
    }
  }
}

浏览器兼容性
生成的 CSS 选择器需符合目标浏览器的支持范围。

六、高级用法示例

生成媒体查询内的独立选择器

@media (min-width: 768px) {
  .container {
    @at-root (without: media) {
      .desktop-only {
        display: block;
      }
    }
  }
}

编译后：

.desktop-only {
  /* 完全脱离 @media 和 .container */
  display: block;
}

七、总结

@at-root 是 Sass 中用于优化选择器嵌套结构的核心指令，通过它你可以：

生成独立的选择器
配合 BEM 等命名规范
精准控制嵌套上下文
避免冗余的 CSS 输出

重点是在需要解耦样式关系或避免过度嵌套时合理使用此指令。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24