How to Use Sass in Angular Application

Angular supports Sass, CSS, and Less to style global applications and 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 (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 called 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.

Check the version of your Angular CLI by this command.

ng --version

Here is the step-by-step guide to use Sass in Angular.

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.

Sass in Angular Example

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 we have an app.component inside the app folder.scss file.

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

We have included the Bootstrap.scss file for our project, saved the file, and started 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.

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 used the Simple Bootstrap Navbar. But now we need to change some styles of the 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 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, then define the above and use that variable whenever needed.

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 over 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, create a new Angular project like this.

ng new angularsass --style=scss

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 variablesmixinsforms, buttonstables, 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";

That’s it.

1 thought on “How to Use Sass in Angular Application”

  1. If some one wants to bbe updated with most recent technologies afterward he must be
    visit this site and be up to date everyday.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.