AppDividend
Latest Code Tutorials

How To Use Sass In Angular 7 Tutorial Example

170

Get real time updates directly on you device, subscribe now.

In this demo, we will see How To Use Sass In Angular 7 Tutorial Example. When working with the Angular CLI, the default stylesheets have the .css extension. We are using Angular CLI 7. So, if you have not used previously, then please upgrade your CLI version. You can find instructions about updating your Angular CLI here. We will use Bootstrap 4 Framework for this demo and see how we can configure the Sass in our Angular Application.

How To Use Sass In Angular 7 Tutorial Example

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

ng --version

 

How To Use Sass In Angular 7 Tutorial Example

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 that 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 the 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 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 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.

Related Posts
1 of 17

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 variablesmixinsforms, buttonstables, 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 or Angular 6.

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

 

Leave A Reply

Your email address will not be published.

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