再见 SASS👋，欢迎回归原生 CSS

Sass 已经成为一款强大的本地预处理器，十多年来一直是我项目的支柱。它帮助我高效地组织可扩展且稳定的 CSS 包。即使在今天，我仍然认为 Sass 是一款极其强大的工具。然而，随着我们步入 2024 年，不可否认的是，CSS 经历了快速的发展。曾经 Sass 独有的功能现在已原生集成到 CSS 中，包括变量和最新的亮点：CSS 嵌套。

变量

定义变量长期以来被视为 SCSS 的独特优势，它允许集中管理许多属性，而 CSS 长期以来一直缺乏这一功能。如今，CSS 中也可以以类似于 Sass 的方式定义变量。然而，一个显著的区别是，Sass 变量仅存在于预处理器上下文中，而 CSS 变量可以在浏览器中使用，甚至可以通过 JavaScript 动态覆盖。

: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嵌套

能够在一个元素内定义另一个元素的样式规则，显著简化了 CSS 的编写。嵌套允许将下属元素或伪选择器分组到父选择器中，而无需重复使用相同的选择器。这种技术可以实现清晰、层次分明的结构，从而提高代码库的效率。

随着浏览器对 CSS 嵌套的支持率超过 84%，对嵌套选择器的支持率超过 86%，这种技术正变得越来越普及。

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

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

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

:is 伪类

伪:is类通过接受选择器列表并为所有匹配这些选择器的元素设置样式，彻底革新了选择器的概念。这极大地方便了 DOM 中元素的选择和样式设置。

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

您可以使用 :is() 代替长选择器列表，以提高可读性，同时避免使用长选择器。

:has() 伪类

CSS 伪类:has()提供了一种强大的方法，可以根据元素的后代来选择元素，类似于条件样式的应用。

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

容器查询

容器查询被认为是自 CSS3 以来网页设计领域最重要的创新。它扩展了响应式设计的概念，允许元素根据其容器的大小进行调整。这项技术使元素的设计能够根据上下文动态变化，从而实现更灵活、更自适应的设计。

.component {
  --theme: dark;
  container-name: fancy;
}

@container fancy style(--theme: dark) {
  .fancy {
    /* dark styles. */
  }
}

.parent-container {
  container-type: inline-size;

  .headline {
    font-size: 2rem;
  }

  @container (width >= 720px) {
    .headline {
      font-size: 2.5rem;
    }
  }
}

如果容器主题有变量--theme: dark，则添加以下 CSS。

级联层

借助级联层，我们可以避免类、ID 等的嵌套，并通过分配自己的层（layer）来提高优先级。使用@layer@ 规则和 layered @imports，我们可以构建自己的级联层——从低优先级的样式（例如重置和默认值），到主题、框架和设计系统，再到最高优先级的样式（例如组件、实用程序和覆盖）。级联层提供了更强大的控制力。

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

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

SASS 的未来

这是否意味着 Sass 已经过时了？完全不是。混合宏和函数（例如将像素转换为 rem）仍然是 Sass 不可替代的优势。尽管如此，我还是决定在大多数项目中放弃 Sass。取而代之的是，我在 Sublime 编辑器中使用预定义的代码块和包，这显著改善了我的工作流程。

再见了 SASS？

我坚信，到 2024 年，Sass 的优点（包括安装、使用和编译问题）将不再证明它的合理性。现代 CSS 的可扩展性和用户友好性使得我们无需依赖任何额外的工具即可完成工作。

还想了解更多？快来看看我的项目 CSSToday：csstoday.dev/

随着 CSS 的进步，我期待能够直接、直接地实现大大小小的项目。

再见，Sass，谢谢你！