css嵌套与@layer

November 11, 2023

CSS nesting

注意：firefox117 完整支持。chrome112119 部分支持（历史规范问题）chrome120 支持最新规范
由于历史规范原因，在 chrome112119 下不能省略 & 符号，否则会出现不符合现行规范的奇奇怪怪的问题。
scss 在线编译：https://sass-lang.com/playground/

现行规范中 & 嵌套选择器的语法可以说基本与 scss 表现一致。
当然某些 css 无法实现的功能除外，比如 & 是不支持 scss 的字符串连接的，即：

css

.component {
    &__child-element {
        /* css 不支持这样，会导致这个选择器块失效（因为css无法解析） */
        /* 但是外层选择器还是有效的，即嵌套中的选择器块失效不影响外部选择器块有效 */
    }
}
/* scss 会编译成这样 */
.component__child-element {
}

此外，css 允许无需嵌套，直接使用 & 选择器（scss 不支持）
此时 & 相当于 :scope （注：在 css 中相当于 :root，此伪类主要在 js 中使用）

css

& {
    background: wheat;
}
/* 相当于 */
:scope {
    background: wheat;
}
/* 相当于 */
:root {
    background: wheat;
}

css 嵌套的优先级与 :is() 的优先级完全一致，即优先级由选择器列表中的最高优先级相同

css

//@prettier-ignore
#a, b {
    & c {
        color: blue;
    }
}
/* 相当于，优先级相当于 #a 选择器的优先级 */
:is(#a, b) {
    & c {
        color: blue;
    }
}

css 嵌套和 at-rules 一同使用时也与 scss 基本一致，这里从略。

参见：https://developer.mozilla.org/docs/Web/CSS/CSS_nesting/Nesting_at-rules

@layer

@layer 用于创建一个级联层，即属于同一个 @layer 的 css 具有相同的级联

创建级联层的方法有三种：

css

/* 直接创建级联层 */
@layer cascade {
    display-none {
        display: none;
    }
}

/* 引入 css 并将其导入到一个级联层中 */
@import (cascade.css) layer(cascade);

/* 仅创建级联层，但不指定任何样式。可以同时声明多个 */
@layer cascade1, cascade2, cascade3;

当我们多次声明一个同名的级联层时，后面的声明会被合并到第一个声明中。

css

@layer cascade;

.foo {
}

@layer cascade {
    display-none {
        display: none;
    }
}

.bar {
}

@layer cascade {
    display-block {
        display: block;
    }
}

/* 相当于 */
@layer cascade {
    display-none {
        display: none;
    }
    display-block {
        display: block;
    }
}

.foo {
}

.bar {
}

不同级联层的优先级按它们第一次在 css 出现的顺序依次递增。（高层覆盖低层，越后出现的级联层优先级越高）

级联层的好处在于它是超脱于选择器的存在。即无论选择器本身的优先级，
优先级更高的级联层中的样式覆盖优先级更低的样式。

其它不属于任何级联层的样式将被集中到同一匿名层，并置于所有层的后部，
即不属于级联层的样式覆盖级联层中声明的样式。

级联层允许嵌套，父子级联层用 . 连接

css

@layer framework {
    @layer base;
    @layer layout {
    }
}

@layer framework.layout {
    p {
        margin-block: 1rem;
    }
}

级联层可以不指定名称，即允许匿名级联层。
匿名级联层因为没有名字，自然无法在创建之后再次添加规则。

css

:scope {
    /* 非级联层，优先级高于任何级联层 */
    background: hotpink;
}

@layer {
    /* 匿名级联层 */
    :scope {
        /* 被覆盖 */
        background: skyblue;
    }
}

@layer; /* 语法正确，但没有任何意义 */

←Back to home