Introduction :
A CSS preprocessor may sometimes be difficult to integrate into your web project. In order to make the CSS preprocessor of your choice more accessible while using Webpack or another JavaScript bundler directly, you must manually instal plugins and set up the required configuration. Using the Angular CLI, one of the Angular framework’s most potent features, the Angular framework takes care of everything for you. The Angular CLI will help you when it comes to selecting a CSS preprocessor.
The Sass and Less preprocessors for your Angular project will be set up and used in this article. Let’s start now!
The Selection Of Default Styles For Angular Templates :
By executing the below command using NPM, you may download the Angular CLI onto your computer:
npm install -g @angular/cli
Now you may access the CLI by using the ng command. Run ng -h to get a complete list of the commands that are available. A new Angular project has to be bootstrapped first. Running is an easy way to do this:
ng new my-app
The Angular CLI will offer you to select a CSS preprocessor once you perform the aforementioned command. Your options are:
- CSS
- Scss
- Sass
- Less
- Stylus
You will discover what it looks like to utilise CSS, Sass, or Less in your component templates in the parts that follow.
CSS :
When you select CSS, no CSS preprocessor is used. This implies that you are ignoring a number of the preprocessors’ really helpful capabilities. Here are a few of these:
- Built-in functions
- Variables
- Nesting/Parent Selectors
- Mixins
However, you should be aware that when you use CSS or any of the other preprocessors with your Angular component template, your styles are contained. Going into the syntax of CSS is outside the purview of this article. This has a lot of power! The style declarations are often used application-wide in a cascading manner when you create CSS code. This implies that you may unintentionally write certain styles in one area of your app, and then those styles could unintentionally leak over into an entirely different area of your app. Uh oh! By using view encapsulation through the Shadow DOM, Angular cleverly circumvents this problem. As a result, any styles you specify in a component style file are certain to only be applied to that section of the DOM’s subtree.
Sass :
Syntactically Awesome Style Sheets is what Sass stands for, and it’s a great moniker! Sass offers a tonne of additional functionality while removing many of the CSS syntactic constraints, such as blocks and semicolons. The ability to create variables is perhaps Sass’ most helpful feature, as you’ll discover with every preprocessor. You may save a lot of redundant code from your style sheets by using variables in your Sass code. You declare a variable in Sass in the following way:
$my-gray: #888888
After that, you may apply it as follows:
.navbar
background-color: $my-gray
You’ll see that indentation is utilised in the Sass code above rather than blocks and semicolons. Sass does not require them. Although writing less code for you to write might be a positive thing, if you have been writing CSS for a while, it may be challenging to adjust.
Sass also enables nesting of style declarations in addition to variables. By doing this, you may further cut down on redundant style sheet code and make your style much easier to understand.
.navbar
background-color: $my-gray
ul
list-style: none
li
font-size: 12px
The same guidelines that apply to CSS or any other CSS preprocessor you pick also apply to Sass when it comes to view encapsulation. Component styles won’t mix with those of other components if you have view encapsulation enabled for your component.
Less :
The Angular CLI allows you to utilise Less, which stands for “Leaner Style Sheets,” as another CSS preprocessor inside of your Angular component templates. All of your created component style files will have the.less extension if you select this option. Less differs from Sass in that every legitimate CSS code is likewise legitimate in Less. This makes learning to write Less relatively simple if you are already familiar with CSS. You’ll discover some of the Less preprocessor’s most potent capabilities in this section.
Variables are perhaps Less’ most beneficial feature. You declare a variable like this in a.less file.
@my-gray: #888888;
.navbar {
background-color: @my-gray;
}
Less functions in a similar way to Sass or CSS when it comes to view encapsulation. Your Less styles will only be used by the Angular component for which they were specified as long as it uses the standard component view encapsulation.
Your Angular app makes it simpler to deal with CSS, Less, or Sass than most other frameworks. Through its built-in view encapsulation, Angular’s CLI enables you to componentize your styles.
