SCSS Basics
Sass (Syntactically Awesome Style Sheets) is a CSS pre-processor that adds features to CSS that make it easier to write, maintain, and reuse CSS code. Sass styles needs compiled into CSS, so that the browser can understand it.
If you’re new to SASS, please go through SASS basics official guidelines.
Here are some of the features of Sass that you need to understand to proceed with this series:
- Variables: Sass variables can be used to store values that can be reused throughout your CSS. This can help to make your CSS more concise and easier to maintain. Learn more.
- Interpolation: Sass allows you to interpolate variables into strings, which can help to make your CSS more concise and easier to maintain. Learn more.
- Nesting: Sass allows you to nest CSS rules, which can help to make your CSS more organized and easier to read. Learn more.
- Mixins: Sass mixins are reusable blocks of CSS code that can be called from anywhere in your CSS. This can help to reduce repetition and make your CSS more modular. Learn more.
- Functions: Sass functions are reusable blocks of code that can be used to perform common tasks, such as calculating the length of a string or converting a number to a string. This can help to make your CSS more concise and easier to read. Learn more.
- Usage of
@use: The@userule loads mixins, functions, and variables from other SASS stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called “modules”. Learn more - Usage of maps: Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key. They are written
(<expression>: <expression>, <expression>: <expression>). The expression before the:is the key, and the expression after is the value associated with that key. The keys must be unique, but the values may be duplicated. A map with no pairs is written(). Learn more.
Usage with Angular Material Components
Code bases of Angular Material, uses sass as styling language. Having knowledge of basics of sass will help you understand code snippets in next articles more easily. And it will also help you if you are planning to extend Angular Material theme.
Angular Material Components
The Angular team builds and maintains both common UI components and tools to help us build our own custom components. @angular/material is Material Design UI components for Angular applications.
Angular Material also provides tools that help developers build their own custom components with common interaction patterns.
Angular Material’s Theming System
Angular Material’s theming system lets you color, typography, and density styles for components in your application. The theming system is based on Google’s Material Design 3 specification which is the latest iteration of Google’s open-source design system, Material Design.
New changes of Material 3
Angular Material team announced first experimental support of Material 3 on Feb 14, 2024. You can read tha announcement here.
After around 3 months, with Angular 18, they announced stable support for Material 3 design. In this course, we are going to learn everything about Material 3 design for Angular Material.
This section delves into the key changes introduced in Material 3:
A New Color Palette
One of the most noticeable changes in Material 3 is the revamped color palette. The focus is on creating more vibrant and accessible color combinations.
- Expanded Color System: Material 3 introduces tertiary colors, offering a wider range of options for creating distinctive and engaging user interfaces.
- Tonal Structure: The color system now emphasizes tonal variations, providing depth and hierarchy to your designs.
- Dynamic Theming: Leverage the power of dynamic color to create personalized experiences based on user preferences or system settings.
Typography Refinements
Material 3 brings a refined typography system that enhances readability and visual hierarchy.
- Updated Font Weights: A more comprehensive set of font weights is available to create effective visual distinctions between different content levels.
- Improved Text Scaling: The typography system ensures better scalability across various screen sizes and devices.
- Enhanced Readability: The new font styles and spacing contribute to a more comfortable reading experience.
Component Overhaul
Many Angular Material components have received a visual and functional update to align with Material 3 principles.
Theming and Customization
Material 3 introduces a flexible theming system that empowers developers to create custom designs.
- CSS Variables: The use of CSS variables simplifies theme customization and overrides.
- Theme Creation: Easily create custom themes based on your brand guidelines or user preferences.
- Component-Level Styling: Fine-tune component styles without affecting the overall theme.
Support Material 2
If you would like to understand the changes for Material 2 design with Angular Material 18, I would recommend you to read my article Updating to Angular Material 18, or simply check the breaking changes.
Dimensions of Angular Material Theming
Angular Material is a UI component library for Angular applications that implements Google’s Material Design. One of its powerful features is the theming system, which allows developers to customize the look and feel of their applications. In this article, we’ll explore the key dimensions of Angular Material theming.
You configure the appearance of your Angular Material app using these three theming dimensions: color, typography, and density.
1. Color
Styles related to the colors in your application.
2. Typography
Styles related to the fonts used in your application, including the font family, size, weight, line-height, and letter-spacing.
3. Density
Styles related to the size and spacing of elements in your application.
We are going to learn how to use these dimensions to customize the appearance of your Angular Material app in next chapters.