An @use expression loads a Sass module and exposes its variables and functions through a namespace. In Angular Material styles, the namespace material gives access to palettes, typography configuration, and color helpers. section 28.3.2
Loading Angular Material Sass features
Use @use "@angular/material" as material; then write material.$indigo-palette, material.define-palette(...), and material.get-color-from-palette(...). The material prefix identifies members supplied by the loaded module. section 28.3.2
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);
}
A complete custom-button stylesheet shows the expression in context, from module loading through palette, typography, and generated component styles. section 28.3.2
