Sass 作为一个强大的CSS预处理器，在过去十年里广受大家好评。它能够帮助我们高效地组织可扩展和稳定的 CSS 代码。然而，随着CSS的快速发展。曾经只有 Sass 才有的特性现在已经集成到 CSS 中了，包括Sass最引以为豪的变量语法和嵌套语法。

变量

在曾经很长的一段时间里，能够在CSS中定义变量被视为是 SCSS 的最独特优势，通过定义变量的方式，我们可以批量的管理属性，并且这也是原生CSS中一直被人吐槽的地方（当我们需要修改同一个属性时，需要修改多次）。但是随着CSS的快速发展， CSS 中也支持定义变量这种语法了，它的定义方式类似于 Sass。但是，它们之间的一个重大区别，是Sass的变量仅存在于预处理器上下文中，而 我们的CSS 变量可以在浏览器中使用，甚至可以通过 JavaScript 动态修改。

下面我们就示例如何在原始CSS中定义变量。

//定义变量
:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

//使用变量
.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

CSS的嵌套

在样式的编写中 嵌套式的语法帮助了我们大大的减轻工作量也提高了代码的可读性。

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

    .blog-item {
      border: 1px solid var(--neutral-200);

      & span {
        font-size: 1rem;
      }
  }
}

:is 伪类

:is 伪类是通过接受一个选择器列表为参数，然后将后边的样式分别赋值给每个作为参数的选择器，它大大的减少了我们样式中的重复代码，并且可以大大的提高我们的编写代码的效率。

:is(selector1, selector2, selector3) {
  /* 样式 */
}

:has 伪类

:has()表示满足一定条件后，就会匹配该元素，并且括号里面可以填组合选择器、类选择器、ID 选择器、属性选择器

选择包含特定子元素的父元素

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

选择包含特定标签名的子元素的父元素：

cssCopy code
/* 选择包含 <span> 标签的子元素的 div 元素 */
div:has(> span) {
    /* CSS 样式 */
}

选择包含指定属性的子元素的父元素：

cssCopy code
/* 选择包含有属性 "href" 的子元素的 a 元素 */
a:has(> [href]) {
    /* CSS 样式 */
}

选择包含特定属性值的子元素的父元素：

cssCopy code
/* 选择包含具有 "data-active" 属性并且值为 "true" 的子元素的 div 元素 */
div:has(> [data-active="true"]) {
    /* CSS 样式 */
}

容器查询

容器查询被认为是 CSS3 以来最重大的创新。因为它可以根据指定容器在尺寸发生变化时，在满足条件的情况下设置其内部元素样式。类似@media，但不同的是@container是针对容器元素，而@media针对的是浏览器窗口。

/* 定义一个名为 component 的 CSS 类 */
.component {
  /* 设置一个名为 --theme 的 CSS 变量，值为 dark */
  --theme: dark;
  /* 设置 container-name 属性的值为 fancy */
  container-name: fancy;
}

/* 使用 @container 自定义容器查询 */
/* 当容器名称为 fancy 且主题为 dark 时，应用下列样式 */
@container fancy style(--theme: dark) {
  /* 选择所有类名为 fancy 的元素 */
  .fancy {
    /* 在这里定义 "dark" 主题下的样式 */
    /* 这里可以添加一些适用于暗色主题的样式 */
  }
}

/* 使用媒体查询 */
/* 当视口宽度达到至少 720 像素时，应用下列样式 */
@container (min-width: 720px) {
  /* 选择所有类名为 headline 的元素 */
  .headline {
    /* 设置字体大小为 2em */
    font-size: 2em;
  }
}

@layer（级联层）

作用：用于控制样式表中规则的层叠顺序。它允许我们将样式表中的规则分组到不同的层中。

在 CSS 中，不同来源的样式规则具有不同的优先级。例如，开发者编写的样式表（作者样式表）比浏览器默认样式表（用户代理样式表）具有更高的优先级。这种优先级关系可以被理解为“级联规则”。

使用级联层，开发者可以更灵活地控制这些级联规则。在级联层 A 中声明的 CSS 规则与级联层 B 中的规则完全独立，它们的生效与否仅取决于它们所在的级联层（除非使用了 !important）。因此，当我们希望引入第三方样式表但又不希望第三方某些高优先级的规则覆盖原始的同名规则时，可以使用级联层来实现这一目的。

任何未在级联层中声明的 CSS 规则都会被收集到一个匿名的级联层中，并放置在所有手动声明的、有命名的和匿名的级联层之后。这意味着任何未在级联层中声明的 CSS 规则都将覆盖在级联层中声明的规则，与规则的权重无关。

通过使用级联层，开发者可以更好地管理样式规则，确保特定规则的优先级，以及更好地控制第三方样式表的影响。

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

作者：zayyo
链接：https://juejin.cn/post/7350209063520600102