This post will discuss new web features that can impact the way we design styling in our Angular apps.
Use @use instead @import
Sass has introduced a new module system in 2019, including migration from @import into @use. Changing to @use syntax permits us to more smoothly determine what CSS is not being used and decreases the size of the compiled CSS output. It is impossible to accidentally include transitive dependencies. No matter how many times you load the styles, each module is only included once. AngularJs Training in Chennai helps developers to learn about angular CSS variables in depth.
Angular Material v12 presented @import use to @use migration for every import into the Angular Material Sass styles. This refactoring of our theming API surface makes it easier for developers to use the new module system. This is done in scripts that are part of ng update. This change can be seen in the way that angular communities define an Angular Material theme.
// Angul Material styling is imported under the name’mat.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
Angular Community uses namespaces to define core ‘@angular/material’ such as mat and then access variables such a mat.$indigo palette. If you look at the source code, you will see that the angular community is more deliberate about which variables are @forward-ed to public access to help users style their web pages cleaner.
Fetch AngularJs Online Course See the updated Angular Material theming documentation and CSS angular.
Enabling modern CSS concepts
After receiving comments, Angular v13 has removed support for IE11. This permits Angular to embrace current web stylings like CSS Grid, CSS logical property, CSS calc hover, and more. These features will be available in the Angular Material Library. We encourage you to use them.
The web is a great place to start if you are interested in improving your current CSS skills. The devs Learn CSS course is a great way for you to improve your CSS knowledge.
Start using CSS Variables!
CSS Variables, also known by CSS Custom Properties, are now possible thanks to the removal of IE11 support. It’s like defining an API surface for developers to customize styles. Developers can consume or override these properties by providing a set of guidelines for margin size and color variables.
Imagine a library with a share button and custom styling.
:root {
–primary: green;
–accent: blue;
}.share-button {
background-color: var(–primary);
color: var(–accent);
}
The CSS variables can be used to create clean styling. This library component is used in order to assign primary and accent colors. You will see the visual changes in the use of the share button:
: root {
–primary: red;
–accent: yellow;
}
Future overriding styles
CSS Variables allow developers to access well-supported APIs to customize component components. This allows them to move away from CSS overrides or::ng-deep.
To create an API surface that allows you to customize libraries, the angular community suggests implementing custom variables in your dependencies and libraries. Developers can have greater control over their styling, and custom variables provide an alternative to CSS overrides or::ng-deep.
CSS Variables in Angular Material
Angular Community explores CSS Variables to expand the API surface for Material theming and allow more individualization of the Angular Material Components. This is part of an expansion of Material Design’s systems of customization.
You can style with the Angular CLI.
Inline Sass in components
Inline Sass was added to Angular components in v12. CLI now allows you to specify an inlineStyleLanguage. This compiles Sass directly into your Angular components and creates styling. This feature is useful for developers who use single-file components or want to add small amounts of styling to their component files.
You will need to specify the language you want to use in your angular.json configurations:
{ “projects”: {
“architect”: {
“build”: {
“options”: {
“styles”: [
“src/styles.scss”
],
“inlineStyleLanguage”: “scss”,
…
You can now write Sass in @Components!
import Component from ‘@angular/core’;@Component({
selector: ‘app-root,
template: ‘
V12 now has an inline Sass!
‘,styles: [`
$neon: #cf0;
@mixin background ($color: #fff) {
background: $color;
}
h1 @include background($neon)
`]
}) export class AppComponent {}
Tailwind, and other PostCSS
Angular v11.2 introduced native support for TailwindCSS PostCSS using the Angular CLI.
To enable TailwindCSS: ng update to version 11.2+ then:
1. Add -D tailwindcss to yarn
2. In the workspace or in the project root, create a TailwindCSS configuration record
// tailwind.config.jsmodule.exports = {
purge: [],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Critical CSS inlining
Critical CSS Inlining was also added to Angular v12 to ensure that Angular applications deliver the highest Core Web Vital metrics.
Conclusion:
In this blog, we have discussed the State of CSS in Angular. if you require more knowledge in angular CSS variables, connect with FITA Academy they offer the best AngularJs Training in Coimbatore under the guidance of experienced real-time professionals.