Sass is a CSS superset for building complex styles without endlessly duplicating CSS properties. SCSS files use the .scss extension, remain compatible with CSS, and compile during an Angular project build into stylesheets browsers understand. section 28.3
Use Sass features to organize component styling and connect custom components to a theme:
- Import Sass and Angular Material features with @use, then access namespaced variables and functions such as material.$indigo-palette. section 28.3.2
- Define primary, accent, and warning palettes from Angular Material base palettes, and configure typography for generated styles. section 28.3.2
- Generate related selectors with @each, nesting, and interpolation, then retrieve palette colors and typography values through theme functions. section 28.3.2
- Inspect package SCSS and browser developer tools when theme APIs or generated styles are difficult to understand. section 28.3.2
Themed custom button
A customButton.component.scss file imports Angular Material, defines three palettes, configures typography, and styles button.custom-button-primary, button.custom-button-accent, and button.custom-button-warn through an @each loop. Palette functions supply background and contrast colors, while nested font properties use the configured button typography. A disabled selector applies the theme's disabled colors. The Angular component attaches the matching class from its themeColor input.
Listing 28.19. The customButton.component.scss file in the src/app/core folder
@use "@angular/material" as material;
$primary: material.define-palette(material.$indigo-palette);
$accent: material.define-palette(material.$pink-palette, A200, A100, A400);
$warn: material.define-palette(material.$red-palette);
$typography: material.define-typography-config();
button[class*="custom-button-"] {
padding: 7px 12px;
border: none;
border-radius: 4px;
margin: 2px;
}
button.custom-button {
@each $name, $palette in (primary: $primary,
accent: $accent, warn: $warn) {
&-#{$name} {
background-color:
material.get-color-from-palette($palette, default);
color: material.get-color-from-palette($palette,
default-contrast);
font: {
family: material.font-family($typography, button);
size: material.font-size($typography, button);
weight: material.font-weight($typography, button);
}
}
}
}
$bg: material.$light-theme-background-palette;
$fg: material.$light-theme-foreground-palette;
:host[disabled] button[class*="custom-button-"],
button[class*="custom-button-"]:disabled {
background-color:
material.get-color-from-palette($bg, disabled-button);
color: material.get-color-from-palette($fg, disabled-button);
}
Inspect the complete SCSS listing to see imports, palette variables, typography configuration, shared button rules, generated theme classes, and disabled-state styling together. section 28.3.2
