Use Sass and CSS Within an Angular Component Template

02 December 2021

Introduction

When you are using the Angular framework in your project, you don’t need to worry about the manual  installation of the CSS and SCSS because Angular provides you default and easy installation of a CSS and SCSS. When you are starting to create your angular project via using Angular CLI then angular provides you with options for the CSS and SCSS. With the help of Angular CLI, you can install CSS or SCSS on your project and start working on that in a suitable way.
If you are working with the CSS or SCSS in your angular project then it is very easy for you as compared to most other frameworks.

Using CSS(Cascading Style Sheets)

Example: In CSS:

body{
    height: 40px;

    Padding: 10px;

    cursor: pointer;

    min-width: 100px;

    font-style: oblique;

    text-align: center;
}

Angular projects have been styled with standard CSS. If you are going with the CSS in your angular project then you are not actually using only the CSS preprocessor in your angular application. Some of these following are included:

• Built-in functions
• Variables
• Nesting/Parent Selectors
• Mixins

… and many more. Using CSS in your  angular project means you have less dependency in your code. When you use CSS or any of the other preprocessors with your Angular component template your styles are encapsulated. This is incredibly powerful! Normally, when you write CSS code, the style declarations are applied application-wide in a cascading fashion.

Using SCSS(Syntactically Awesome Stylesheet)

Example: In SCSS:

      $height: 40px;

      $padding: 10px;

      $cursor: pointer;

      $minWidth: 100px;

body{

     height: $height;

     Padding: $padding;

     cursor: $cursor;

     min-width: $minWidth;

     font-style: oblique;

     text-align: center;
  }

Syntactically Awesome Stylesheet is the superset of CSS. From the CSS, SCSS remove many of the syntax requirement eg. blocks and semicolons, and adds on a ton of new features for you to use. The variable creation is the most useful feature of the SCSS. Using variables in your SCSS based angular project helps you to remove a lot of duplicated code from your style sheets. In Sass, you declare a variable like this:
Eg:

    $height: 40px;

    $padding: 10px;

Sass also allows you to nest style declarations. This makes your style code easy to read and can further reduce duplicated style sheet code.

Comparison between CSS and SCSS

CSS Feature	SCSS Feature
1.It uses an extensive line of codes.	1.It uses fewer lines in its code than the CSS.
2.Nested rules are not assisted in Regular CSS.	2.It promotes properly nested rules.
3.It is the styling language that is used to style and create web pages.	3.It is a special type of file for the SASS program written in the Ruby language.
4.CSS is a scripting language that is used to develop the web page.	4.The more advanced variant of CSS is SCSS. It is a preprocessor language that is compiled or interpreted into the CSS.
5.It contains common functions.	5.It contains more advanced features.

🔊 Listen