Angular Sass: How to use Sass in Angular 14

Angular supports Sass, CSS, and Less to style global application styles as well as component styles. In addition, angular component styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles.

Angular Sass

Angular Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use variables, nested rules, inline imports, and more. It also supports you in keeping things organized and enables you to create style sheets faster.

Sass is a CSS preprocessor that combines unique features such as variables, nested rules, and mixins (sometimes referred to as syntactic sugar) into regular CSS. The main object of Sass is to make the CSS coding process more comfortable and efficient.

Sass is compatible with all versions of CSS. The default stylesheets have the .css extension when working with the Angular CLI. We are using Angular CLI 8. So, if you have not used it previously, please upgrade your CLI version. We will use the Bootstrap 4 Framework for this demo and see how to configure the Sass in our Angular application.

First, check the version of your Angular CLI by this command.

ng --version

If it is not the latest, upgrade to the latest version, and come back here. 

Step 1: Create a new Angular Project

Type the following to create a new Angular project.

ng new angularsass

You will see some prompts like this while creating a new project.

We can see that we have asked if we want to use the Sass styles for our project. I have chosen Angular Routing to No and chosen Sass for styles.

Now our project’s styles are changed to Sass. You can see the files inside the src folder that we have styles.scss file, and inside the app folder, we have app.component.scss file.

Next, we need to include Bootstrap 4 in our project.

Step 2: Install the bootstrap-sass library.

Install the bootstrap-sass library, which is the SASS version of Bootstrap.

npm install bootstrap --save

The next step is importing that file inside the src >> styles.scss file. So let us do that.

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

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

So, here we have included the Bootstrap.scss file for our project, save the file and start the angular development server.

ng serve

You can see that we have successfully integrated the Bootstrap sass library into our project. Now, we can add more scss files to it, compile them to CSS, and use them in our project.

Step 3: Add new scss styles.

First, let us create a navbar inside our project.

So write the following code inside the app.component.html file.

<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>

We have used the Simple Bootstrap Navbar. But now we need to change some styles of navbar.

So we will write the scss code to change those styles. Save the file and see the navbar on the browser.

Let us create new classes inside the app.component.scss file. We will add the pseudo-classes to the navbar component.

// 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;
    }
}

Here, we have defined the color variable. You can create a separate file like the _variables.scss file, but for now, stick with this code.

If some of the colors are repeated, we can define the variable and then define the above and use that variable whenever needed.

Now, add the new classes inside the app.component.html file.

<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>

Save the file, and now hover the button, links inside the browser. You can see that the brown color is applied to our styles. So that is how you can include the SCSS in our project.

Use Sass in Angular 13 or Angular 14

If you have Angular CLI below version 7, you must create a new Angular project like this.

ng new angularsass --style=scss

Now, add the Bootstrap 4

npm install bootstrap --save

// or using yarn

yarn add bootstrap

After installing it, we need to add the Bootstrap Sass main file (i.e., where all the styles such as variables, mixins, forms, buttons, tables, etc., are imported) to the styles.scss file, which was automatically generated when you created the project.

// styles.scss

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

So this is how you will integrate the Sass in Angular 5, Angular 6, Angular 7, Angular 8, or Angular 9. There is not much difference in it.

That’s it for the Angular Sass tutorial. Thanks for taking it.

Related posts

Angular FormControl

Angular Modules

Angular NgClass