在 Angular 组件模板中使用 Sass、Less 或 CSS

2020-10-20 08:00飞浪

介绍

通常，将 CSS 预处理器集成到 Web 应用中会很麻烦。如果您直接使用 Webpack 或其他 JavaScript 打包器，则必须手动安装插件并设置必要的配置以方便您选择的 CSS 预处理器。Angular 框架通过 Angular CLI 为您处理所有这些工作 - 这是 Angular 框架最强大的功能之一。在选择 CSS 预处理器时，Angular CLI 可以满足您的需求！

在本指南中，您将学习如何在 Angular 应用中设置和使用 Sass 和 Less 预处理器。让我们开始吧！

为 Angular 模板选择默认样式

可以使用 NPM 运行以下命令将 Angular CLI 下载到你的机器上：

      npm install -g @angular/cli

现在，您可以使用ng命令访问 CLI。要查看可用命令的完整列表，请运行ng -h。首先，我们需要引导一个新的 Angular 项目。这很简单，只需运行：

      ng new my-app

运行上述命令后，Angular CLI 将提示您选择 CSS 预处理器。您的选择是：

CSS（无预处理器）
安全套接字
萨斯
较少的
触控笔

在以下部分中，您将了解在组件模板中使用 CSS、Sass 或 Less 是什么样子。

使用 CSS

当您选择 CSS 时，您不会使用任何 CSS 预处理器。这意味着您错过了预处理器提供的许多非常有用的功能。其中包括：

内置函数
变量
嵌套/父选择器
Mixins

... 还有更多！但是，使用 CSS 意味着您的代码中少了一个依赖项。这总是一件好事！

了解 CSS 语法超出了本指南的范围，但是，您应该知道，当您将 CSS 或任何其他预处理器与 Angular 组件模板一起使用时，您的样式会被封装。这非常强大！通常，当您编写 CSS 代码时，样式声明会以级联方式应用于整个应用程序。这意味着您可能会意外地在应用程序的某个部分编写一些样式，而这些样式可能会不知不觉地渗透到应用程序中完全不相关的部分。哦哦！Angular 巧妙地解决了这个问题，即通过 Shadow DOM 使用视图封装，这样您在组件样式文件中定义的任何样式都保证只应用于 DOM 子树的那部分。当您在应用程序中应用和调试样式时，这会让您轻松很多。

使用 Sass

Sass 代表“语法上很棒的样式表”，这个名字很贴切！Sass 删除了 CSS 中的许多语法要求，例如块和分号，并添加了大量新功能供您使用。正如您在任何预处理器中发现的那样，使用 Sass 最有用的功能可能是变量创建。Sass 代码中的变量允许您从样式表中删除大量重复的代码。在 Sass 中，您可以像这样声明变量：

      $my-gray: #888888

然后你可以像这样使用它：

      .navbar
    background-color: $my-gray
    

请注意，在上面的 Sass 代码中，缩进代替了块和分号。这些在 Sass 中不是必需的。这可能是一件好事，因为这意味着您需要编写的代码更少，但如果您已经编写了很长时间的 CSS，那么可能很难习惯。

除了变量之外，Sass 还允许您嵌套样式声明。这使您的样式更易于阅读，并可以进一步减少重复的样式表代码。

      .navbar
  background-color: $my-gray

    ul
      list-style: none

      li
        font-size: 12px
    

这种嵌套对于您的样式表代码来说非常强大！

在视图封装方面，Sass 和 CSS 或您选择的任何其他 CSS 预处理器适用相同的规则。如果您为组件启用了视图封装，则组件样式不会影响其他组件样式。

Sass 的内容远不止这里介绍的这些。有关更多信息，请查看 Sass文档。

使用 Less

Less 代表“精简样式表”，是 Angular CLI 允许您在 Angular 组件模板中使用的另一个 CSS 预处理器。选择此选项时，生成的所有组件样式文件都将以.less扩展名结尾。Less 与 Sass 的不同之处在于，所有有效的 CSS 代码也是有效的 Less 代码。如果您已经了解 CSS，那么编写 Less 会非常容易。在本节中，您将了解 Less 预处理器的一些最强大的功能。

可以说，Less 中最有用的功能就是变量。在.less文件中，你可以像这样定义变量：

      @my-gray: #888888;

然后，您可以在整个样式表中使用此变量，如下所示：

      .navbar {
    background-color: @my-gray;
}
    

除了变量之外，Less 还允许您定义自己的 mixin，就像 Sass 一样，并且附带大量内置函数供您使用。有关这些内置函数的完整列表，请查看Less 函数列表。

就视图封装而言，Less 的工作方式与 Sass 或 CSS 相同。只要您在相应的 Angular 组件中使用默认组件视图封装，您的 Less 样式就仅适用于已定义的组件。

除了上面简要提到的内容外，还有更多功能！要查看 Less 语言的所有功能，请访问 Less文档。

结论

在 Angular 应用中使用 CSS、Less 或 Sass 比在大多数其他框架中都更容易。借助 CLI，Angular 允许您通过其默认视图封装来组件化样式。

您可能已经注意到，Angular CLI 为您提供的预处理器比本指南中介绍的要多。Stylus和Scss就是其中两个选项。如果您已经了解 CSS，Scss 是一个很好的入门预处理器，因为所有有效的 CSS 也是有效的 Scss。这使得编写 CSS 和慢慢添加所需的功能变得容易。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光25290浏览1367