• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @at-root

    @at-root规则通常是编写的@at-root<selector>{...},并导致其中的所有内容都在文档的根部发出,而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套时。

    例如,假设您要编写一个匹配外部选择器和元素选择器的选择器。您可以编写一个像这样的 mixin,它使用selector.unify()函数与&用户的选择器相结合。

    scss 语句css 语句
    @use "sass:selector";
    
    @mixin unify-parent($child) {
      @at-root #{selector.unify(&, $child)} {
        @content;
      }
    }
    
    .wrapper .field {
      @include unify-parent("input") {
        /* ... */
      }
      @include unify-parent("select") {
        /* ... */
      }
    }
    
    .wrapper input.field {
      /* ... */
    }
    
    .wrapper select.field {
      /* ... */
    }
    

    @at-root规则在这里是必要的,因为 Sass 在执行选择器嵌套时不知道使用什么插值来生成选择器。这意味着即使您用&作 SassScript 表达式,它也会自动将外部选择器添加到内部选择器。@at-root明确告诉 Sass 不要包含外部选择器。

    @at-root还可以编写规则以将@at-root{...}多个样式规则放在文档的根部。其实@at-root<selector>{...},只是一个简写@at-root@at-root{<selector>{...}}


    超越风格规则

    就其本身@at-root而言,只会摆脱样式规则。任何类似于@mediaor的规则@supports都将被保留。但是,如果这不是您想要的,您可以使用诸如媒体查询功能之类的语法精确控制它包含的内容,,这些功能是在根目录下编写的@at-root(with:<rules...>){...}@at-root(without:<rules...>){...}.(without:...),查询告诉 Sass ,应该排除哪些规则;(with:...)。查询排除除列出的规则之外的所有规则。

    scss 语句css 语句
    @media print {
      .page {
        width: 8in;
    
        @at-root (without: media) {
          color: #111;
        }
    
        @at-root (with: rule) {
          font-size: 1.2em;
        }
      }
    }
    
    @media print {
      .page {
        width: 8in;
      }
    }
    .page {
      color: #111;
    }
    .page {
      font-size: 1.2em;
    }
    

    除了 at-rules 的名称之外,还有两个可以在查询中使用的特殊值:

    • rule指风格规则。例如,@at-root(with: rule)排除所有 at 规则但保留样式规则。
    • all指应排除所有 at-rules 和 style 规则。

    上篇:@debug