Angular Sass: How To Use Sass In Angular 9 Tutorial

Angular supports Sass, CSS, and Less to style global application styles as well as component styles. Angular components 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 Example

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

In short, Sass is a CSS preprocessor, which 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 more efficient.

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

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

ng --version

If it is not the latest, then upgrade to the latest version then 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 or not. 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.

The next thing is that we need to include Bootstrap 4 in our project.

Step 2: Install the bootstrap-sass library

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

npm install bootstrap --save

Okay, next step to import 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 in our project. Now, we can add more scss files to it and compile it to CSS and use it 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 some 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 _variables.scss file, but for now, stick with this code.

If some of the colors are being repeated that we can define the variable and then define above and use that variable whenever we 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 5 or Angular 6

If you have Angular CLI below version 7, then you need to 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 has been 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.

Finally, How To Use Sass In Angular Example is over. Thanks for taking it.