自从我们上次在这个博客上介绍 CSS 以来已经有几年了——从那时起发生了很多事情！

在这篇文章中，我们将了解新的 Web 功能，这些功能会影响我们在 Angular 应用程序中定义样式的方式。

使用@use代替@import

2019 年， Sass引入了新的模块系统，包括从@import到@use迁移。通过切换到@use语法，我们可以更轻松地确定哪些 CSS 未使用，并减少编译后的 CSS 输出的大小。这使得不可能无意中引入传递依赖项。无论加载这些样式多少次，每个模块仅包含一次。

Angular Material v12 包括将所有导入 Angular Material Sass 样式的操作从@import用法迁移到@use 。我们的主题 API 表面的重构更容易理解和阅读，帮助开发人员更好地利用这个新的模块系统。此迁移发生在ng update包含的脚本中。这一变化的一个例子是我们如何定义 Angular Material 主题：

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;
// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

现在，我们利用命名空间的引入将核心'@angular/material' as mat ，然后访问mat.$indigo-palette等变量。如果您深入研究源代码，我们会更有意地了解哪些变量是@forward供公共访问的，以引导用户采用更简洁的样式。

查看新重写的Angular Material 主题文档，了解@use和此迁移如何简化组件的主题设置。

启用现代 CSS 概念

在成功征求意见后，Angular v13 删除了对 IE11 的支持 – 使 Angular 能够采用现代 Web 样式，例如 CSS 网格、CSS 逻辑属性、CSS calc() 、 ::hover等等！您可以期待 Angular Material 库开始使用这些功能，我们也鼓励您这样做。

如果您对提高现代 CSS 技能感到好奇，我强烈推荐web.dev 的学习 CSS 课程，这是学习或完善 CSS 知识的好方法。

开始使用 CSS 变量！

IE11 支持的删除为我非常兴奋的事情铺平了道路 – CSS 变量，也称为 CSS 自定义属性！将其视为定义开发人员可以用来自定义样式的 API 表面。您可以提供一组用于边距大小指导或一系列颜色变量的开放属性，并允许开发人员使用和覆盖它们。

想象一个库包含一个具有自定义样式的共享按钮：

:root {
  --primary: pink;
  --accent: blue;
}
.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

然后，用户可以在该库组件用于重新分配主色和强调色的范围内使用 CSS 变量实现干净的样式，并看到这些视觉变化反映在他们对共享按钮的使用中：

:root {
  --primary: green;
  --accent: purple;
}

压倒一切的风格的未来

CSS 变量为组件自定义提供良好支持的 API 打开了大门，使开发人员能够摆脱 CSS 覆盖和::ng-deep 。

我们建议在您的库和依赖项中引入自定义变量，以便创建用于自定义库的 API 界面，而无需::ng-deep 。自定义变量的实现使开发人员能够更好地控制其样式，并提供一条远离 CSS 覆盖和::ng-deep路径。

Angular Material中的 CSS 变量

我们正在探索 CSS 变量，以开放 Material 主题的 API 界面，并支持 Angular Material 组件的更多个性化，作为 Material Design 定制系统扩展的一部分。

对这个项目感兴趣吗？您是否在项目中自定义覆盖 Angular Material？我很想了解更多有关 Angular Material 主题定制的体验。请通过电子邮件与我们的团队联系。

Angular CLI 可以帮助您设计样式

组件中的内联 Sass

v12 引入了在 Angular 组件中使用内联 Sass 的选项。 CLI 现在可以选择提供inlineStyleLanguage并将 Sass 直接从 Angular 组件编译为样式。这对于使用单个文件组件或想要在组件文件中添加少量样式的开发人员很有帮助。

要使用 Sass，您需要在angular.json构建配置中指定语言：

{ "projects": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss"
          ],
          "inlineStyleLanguage": "scss",
          ...

现在您可以在 @Components 中编写 Sass 了！

import { Component } from '@angular/core';
@Component({
  selector: 'app-root,
  template: '<h1>v12 has inline Sass!</h1>',
  styles: [`
    $neon: #cf0;
    @mixin background ($color: #fff) {
      background: $color;
    }
    h1 {@include background($neon)}
  `]
}) export class AppComponent {}

Tailwind 和其他 PostCSS

Angular v11.2 添加了对使用 Angular CLI 运行 TailwindCSS PostCSS 的本机支持。

要启用 TailwindCSS， ng update到 v11.2+，然后：

1.使用yarn add -D tailwindcss安装
2.在工作区或项目根目录创建TailwindCSS配置文件

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or ‘media’ or ‘class’
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

关键 CSS 内联

Angular v12 还引入了关键 CSS 内联，以帮助确保 Angular 应用程序提供最佳的 Core Web Vital 指标。您可以在我们的YouTube 频道上了解有关资源内联的更多信息。这是 Angular 处于 Web 性能前沿的一个很好的例子！

感谢您继续使用 Angular 让网络变得更加时尚！您最感兴趣的新造型功能是什么？

原文链接：https://blog.angular.dev/the-new-state-of-css-in-angular-bec011715ee6