Create Angular Application with SCSS

Angular is a popular JavaScript framework for building web applications. It provides a set of tools and libraries for building client-side applications using modern web technologies.

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds powerful features to CSS, such as variables, mixins, and functions. Sass styles are written in a special syntax called SCSS (Sass CSS), which is a superset of CSS. SCSS files have the .scss extension and are compiled into regular CSS files that can be used in web applications.

In this article, we will go through a step-by-step process explaining how to create an Angular application and use Sass for styling. We will start by creating a new Angular project and installing Sass. Then, we will configure Angular to use Sass and create a Sass file. Finally, we will import the Sass file into an Angular component and run the application to test the Sass styles. Before getting started, make sure you have the following prerequisites:

• Node.js and npm are installed on your local machine. You can download the latest version of Node.js from the official website.
• Angular CLI (Command Line Interface) is installed globally on your local machine. You can install Angular CLI by running the following command in your terminal:

npm install -g @angular/cli

We will create an application to use scss by implementing them with 2 different methods. 

Method 1: Install and use SCSS, after initializing the Angular project.

Step 1: Create a new Angular project

To create a new Angular project, open your terminal and navigate to the directory where you want to create your project. Then, run the following Angular CLI command:

ng new my-project

Replace my-project with the name of your project. This command will create a new directory with the name of your project and generate all the necessary files and folders for an Angular project inside it.

Step 2: Install Sass

To use Sass in your Angular project, you need to install the node-sass package. Navigate to your project directory and run the following command:

npm install sass

This will install the node-sass package as a development dependency in your project.

Step 3: Configure Angular to use Sass

To configure Angular to use Sass, you need to modify the angular.json file in the root of your project. Open the file and find the projects > [project-name] > architect > build > options section. Then, add the following property:

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
}

This will tell Angular to look for Sass files in the src/styles directory.

Step 4: Create a Sass file

Now, that you have configured Angular to use Sass, you can create a Sass file in your project. Create a new file with the .scss extension in the src/styles directory (or any other directory that you specified in the stylePreprocessorOptions property in the angular.json file). For example, you can create a file called styles.scss.

Step 5: Import the Sass file into your Angular component

To use the Sass file in your Angular component, you need to import it in the component's styleUrls property. For example, if you have a component called MyComponent, you can import the Sass file like this:

import { Component } from '@angular/core';
@Component({
   selector: 'app-my-component',
   templateUrl: './my-component.component.html',
   styleUrls: ['./styles.scss']
})
export class MyComponent {
   // component code goes here
}

Step 6: Run the Angular application

To run the Angular application, navigate to the project directory in your terminal and run the following command:

ng serve --open

This will start the development server and serve your Angular application. You can now view the application in your browser.

Example: This example describes the creation of an Angular application to implement the scss.

• app.component.html

<div class="center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        How do you create an angular application to use scss?
    </h3>
    <h4>
        Method 1: Install and use SCSS, after initializing 
        the Angular project.
    </h4>
</div>

<button (click)="toggleList()">
    Show Steps
</button>
<div *ngIf="showList">
    <ul>
        <li>
            Create a new Angular project
        </li>
        <li>
            Install Sass
        </li>
        <li>
            Configure Angular to use Sass
        </li>
        <li>
            Import the Sass file in your Angular component
        </li>
        <li>
            Run the Angular application
        </li>
    </ul>
</div>

• app.component.scss

$main-background-color: green;
$main-text-color: white;
$main-font-size: 16px;
$main-border-radius: 4px;

@mixin button-style {
  padding: 8px 16px;
  background-color: $main-background-color;
  color: $main-text-color;
  border: none;
  border-radius: $main-border-radius;
  font-size: $main-font-size;
  cursor: pointer;
}

body {
  margin: 0;
  padding: 0;
}

button {
  @include button-style;
}

ul {
  list-style: inside;
  padding: 5;
  margin: 10;
}

li {
  padding: 5px;
  font-size: $main-font-size;
  color: gray;
}

• app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'scss-app';
    showList: boolean = false;
    toggleList() {
        this.showList = !this.showList;
    }
}

Output:

Method 2: Use or configure SCSS in your Angular project at the time of initialization with the style flag set to use SCSS.

Step 1: Make an Angular Project with the CLI with the style flag.

The below command will create a new project with the name "project-name" and enable SCSS as the default styling language.

ng new project-name --style=scss

Now, you can create a new component and it will have a .scss file with the same name as the component. For example, we have made the below project with a style flag set to scss.

Project Structure: The below project will appear after successful installation:

Example: This is another example that implements the SCSS with an Angular application.

• app.component.html

<div class="center">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>
        How do you create an angular application to use scss?
    </h3>
    <h4>
        Method 2: Use or configure SCSS in your 
        Angular project at the time of initialization
        with the style flag set to use SCSS.
    </h4>
</div>

<button (click)="openModal()">
     Show Steps
</button>

<div class="modal" 
     *ngIf="showModal">
    <div class="modal-content">
        <span (click)="closeModal()">
            &times;
        </span>
        <ul>
            <li>
                Create a new Angular project
            </li>
            <li>
                Install Sass
            </li>
            <li>
                Configure Angular to use Sass
            </li>
            <li>
                Import the Sass file in your Angular component
            </li>
            <li>
                Run the Angular application
            </li>
        </ul>
    </div>
</div>

• app.component.scss

$button-bg-color: blue;
$button-text-color: white;
$modal-bg-color: rgba(0, 0, 0, 0.5);

@mixin button-style {
  background-color: $button-bg-color;
  color: $button-text-color;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  &:hover {
    background-color: lighten($button-bg-color, 10%);
  }
}

button {
  @include button-style;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $modal-bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  width: 50%;
  height: 50%;
  border-radius: 10px;
  box-shadow: 0px 0px 10px grey;
  padding: 20px;
}

li {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: grey;
}

• app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'scss-app';
    showModal: boolean = false;
    openModal() {
        this.showModal = true;
    }

    closeModal() {
        this.showModal = false;
    }
}

Output: