如何使用带有 Angular 7 的 SCSS Mixins？

在 Angular 7 中，你可以使用 SCSS（Sass） mixins 来重用样式代码。Mixins 是一种将样式代码封装为可复用块的技术，可以减少重复代码，并提高样式的可维护性。本文将向你介绍如何在 Angular 7 中使用 SCSS mixins。

步骤

1. 创建 SCSS 文件

首先，在你的 Angular 7 项目中创建一个 SCSS 文件。可以在 component 的同级目录下创建一个名为 _mixins.scss 的文件，并在其中定义你的 mixins。

// _mixins.scss

// 定义一个 mixin
@mixin center-vertically {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 引入 SCSS 文件

接下来，你需要在需要使用这些 mixins 的组件中引入 _mixins.scss 文件。在组件的 SCSS 文件中使用 @import 指令引入该文件。

// app.component.scss

@import './_mixins.scss';

.container {
  @include center-vertically; // 使用 mixin
}

3. 使用 Mixins

现在，你可以在组件的 HTML 文件中使用 .container 类名，并且该元素将应用 center-vertically mixin 所定义的样式。

<!-- app.component.html -->

<div class="container">
  <p>This is a vertically centered container.</p>
</div>

4. 构建项目

最后，运行你的 Angular 7 项目，并在浏览器中查看结果。你将看到 <div> 元素被居中显示在容器中。

以上就是在 Angular 7 中使用 SCSS mixins 的简单示例。你可以定义多个 mixin，并在项目中的其他组件和样式中重复使用它们。

:::info 注意：在 Angular 7 项目中，建议使用 SCSS（Sass）作为默认的样式预处理器。你可以通过在 angular.json 文件中的 schematics 配置中设置 "style": "scss" 来设置 SCSS 为默认样式预处理器。 :::

希望这个简短的介绍对你有所帮助，快去尝试使用 SCSS mixins 提高你的样式效率吧！