Angular Sass：如何在Angular 14中使用Sass

Angular支持Sass、CSS和Less来设计全局应用样式和组件样式。此外，Angular组件的样式有一个有效的CSS封装机制，保证任何组件的CSS都是组件的局部，不会在全局上改变任何样式。

Angular Sass

Angular Sass（Syntactically Awesome Style Sheets）是CSS的扩展，允许你使用变量、嵌套规则、内联导入等。它还支持你保持事情的条理性，使你能够更快地创建样式表。

Sass是一个CSS预处理器，它将变量、嵌套规则和混合器（有时被称为句法糖）等独特功能结合到常规CSS中。Sass的主要目标是使CSS的编码过程更加舒适和高效。

Sass 与所有版本的CSS兼容。在使用Angular CLI时，默认样式表的扩展名为**.css**。我们正在使用Angular CLI 8。因此，如果你以前没有使用，请升级你的CLI版本。我们将在这个演示中使用Bootstrap 4框架，看看如何在我们的Angular应用程序中配置Sass。

首先，通过这个命令检查你的Angular CLI的版本。

ng --version

如果它不是最新的，请升级到最新的版本，然后再回来这里。

步骤1：创建一个新的Angular项目

输入以下内容来创建一个新的Angular项目。

ng new angularsass

在创建一个新项目时，你会看到一些类似的提示。

我们可以看到，我们已经询问了是否要为我们的项目使用Sass样式。我选择了Angular Routing为No，并选择了Sass作为样式。

现在我们项目的样式已经改为Sass了。你可以看到在src 文件夹中，我们有style.scss 文件，在app 文件夹中，我们有app.component.scss文件。

接下来，我们需要在我们的项目中加入Bootstrap 4。

第二步：安装bootstrap-sass库。

安装bootstrap-sass库，它是Bootstrap的SASS版本。

npm install bootstrap --save

下一步是将该文件导入src >> styles.scss 文件内。所以让我们这样做。

/* You can add global styles to this file, and also import other style files */

@import "../node_modules/bootstrap/scss/bootstrap.scss";

所以，在这里我们已经为我们的项目包含了Bootstrap.scss 文件，保存该文件并启动angular开发服务器。

ng serve

你可以看到，我们已经成功地将Bootstrap sass库集成到我们的项目中。现在，我们可以向它添加更多的scss文件，将它们编译为CSS，并在我们的项目中使用它们。

第3步：添加新的scss样式。

首先，让我们在项目中创建一个导航条。

所以在app.component.html 文件中写下以下代码。

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <a class="navbar-brand" href="#">Angular Sass Example</a>
    <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
    </div>
</nav>

我们已经使用了简单的Bootstrap导航条。但现在我们需要改变导航条的一些样式。

所以我们将写scss代码来改变这些样式。保存文件并在浏览器上看到导航条。

让我们在app.component.scss 文件中创建新的类。我们将把这些伪类添加到导航条组件中。

// app.component.scss

$backColor: brown;

.search-button {
    border-color: skyblue;
    color: blue;

    &:hover, &:after, &:focus {
        background-color: transparent;
        color: $backColor;
    }
}
.brand-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor;
    }
}

.login-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
}

.register-custom {
    &:hover, &:focus, &:active {
        background-color: transparent;
        color:$backColor !important;
    }
}

在这里，我们已经定义了颜色变量。你可以创建一个单独的文件，如**_variables.scss** 文件，但现在，坚持使用这段代码。

如果有些颜色是重复的，我们可以定义这个变量，然后再定义上面的内容，并在需要时使用这个变量。

现在，在app.component.html 文件内添加新的类。

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <a class="navbar-brand brand-custom" href="#">Angular Sass Example</a>
    <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success search-button" type="submit">Search</button>
    </form>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link login-custom" href="#">Login <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link register-custom" href="#">Register</a>
            </li>
        </ul>
    </div>
</nav>

保存文件，现在在浏览器里面悬停按钮、链接。你可以看到棕色被应用到我们的样式中。这就是你如何在我们的项目中加入SCSS。

在Angular 13或Angular 14中使用Sass

如果你有版本7以下的Angular CLI，你必须像这样创建一个新的Angular项目。

ng new angularsass --style=scss

现在，添加Bootstrap 4

npm install bootstrap --save

// or using yarn

yarn add bootstrap

安装后，我们需要在style.scss文件中添加Bootstrap Sass主文件（即导入变量、混合器、表单*、* 按钮、表格等 所有样式的地方），该文件在你创建项目时自动生成。

// styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

所以这就是你如何在Angular 5、Angular 6、Angular7、Angular8或Angular 9中整合Sass。这里面没有太大的区别。

Angular Sass教程就到此为止。谢谢你的学习。