Introduction
Integrating a CSS preprocessor into your web app can often be a challenge. If you use Webpack or another JavaScript bundler directly, you have to manually install plugins and configure them to facilitate the CSS preprocessor you choose. Fortunately, the Angular framework, through its powerful Angular CLI, simplifies this process. The Angular CLI allows you to easily set up and use preprocessors like Less. In this guide, you will learn how to set up and use Less within your Angular app. Let’s get started. For more info visit our blog ” integrating less in your new angular project ”
Choosing Default Styles For Angular Templates
Installing Angular CLI
First, ensure you have the Angular CLI installed on your machine. You can install it globally using npm:
npm install -g @angular/cli
Once installed, you can use the ng command to access the CLI. To see a full list of available commands, run:
ng help
Bootstrapping a New Angular Project
To create a new Angular project, use the following command:
ng new my-app
After running this command, the Angular CLI will prompt you to choose a CSS preprocessor. Your choices are:
- CSS (no preprocessor)
- Scss
- Sass
- Less
- Stylus
For this guide, we will choose Less.
Using CSS in Angular
Why Choose CSS?
When you choose CSS, you are not using any preprocessor. While this means you miss out on some powerful features, it also means fewer dependencies.
Benefits and Drawbacks
CSS is straightforward and has no additional setup requirements. However, you miss out on features like variables, nesting, and mixins.
Encapsulation with CSS
Angular uses view encapsulation to ensure that styles defined within a component are scoped to that component. This prevents styles from bleeding into other parts of your app.
Using Sass in Angular
Introduction to Sass
Sass (Syntactically Awesome Style Sheets) removes many syntax requirements from CSS and adds a host of new features. One of the most useful features is variables.
Variables in Sass
Define a variable in Sass like this:
$my-gray: #888888;Use it like this:
.navbar {
background-color: $my-gray;
}
Nesting in Sass
Nesting allows you to write cleaner and more readable styles:
.navbar {
background-color: $my-gray;
ul {
list-style: none;
li {
font-size: 12px;
}
}
}
Encapsulation with Sass
Sass works seamlessly with Angular’s view encapsulation, ensuring that styles remain scoped to their respective components.
Using Less in Angular
Introduction to Less
Less (Leaner Style Sheets) is another CSS preprocessor that Angular CLI supports. Less is unique in that all valid CSS is also valid Less code, making it easy to adopt if you already know CSS.
Variables in Less
Define a variable in Less like this:
@my-gray: #888888;
Use it like this:
.navbar {
background-color: @my-gray;
}
Mixins in Less
Less allows you to define and use mixins, which are reusable chunks of code:
.rounded-corners (@radius: 5px) {
border-radius: @radius;
}
.navbar {
.rounded-corners(10px);
If you use Webpack or another JavaScript bundler directly, you have to manually install plugins and configure them to facilitate the CSS preprocessor you choose.}
Functions in Less
Less comes with a variety of built-in functions that you can use to manipulate values:
@base: #f938ab;
@width: 10px;
.box {
color: saturate(@base, 5%);
width: @width * 2;
}
Encapsulation with Less
Just like CSS and Sass, Less works perfectly with Angular’s view encapsulation, keeping your component styles isolated and manageable.
Step-by-Step: Setting Up Less in Your Angular Project
Step 1: Create a New Angular Project
Run the following command and choose Less when prompted:
ng new my-app
Step 2: Verify Less Configuration
Ensure that the Angular CLI has set up Less correctly. Your component styles should now be using .less files.
Step 3: Create a Component
Generate a new component to see Less in action:
ng generate component my-component
Step 4: Add Less Styles
Edit the my-component.component.less file to include some Less-specific features:
@primary-color: #4CAF50;
.container {
.header {
color: @primary-color;
}
}
Step 5: Serve Your Application
Run your Angular application to see the styles applied:
ng serveFinal Thoughts
Working with preprocessors like Less can significantly enhance your CSS workflow by introducing advanced features that streamline and simplify your stylesheets. The Angular CLI makes integrating these preprocessors seamless, allowing you to focus on developing robust and secure applications. Happy coding!
