We need a playground to experiment with the button SASS API from Material Web Components.

The initial goal for the playground is to produce the following CSS variable definition with a button selector using the @material/button/button-text-theme SASS module.

button {
    --mdc-text-button-label-text-color: red;
}

Approach

First install the SASS CLI globally with NPM.

npm i -g sass

Then create a playground directory and and run npm init -y such that we can install the dependencies and and we will also create a blank test.scss file.

mkdir sassplayground
cd sassplayground
npm init -y
npm i @material/button
npm i @material/theme
touch test.scss

Within test.scss we will add this playground code and see how it renders.

@use "sass:map";
@use "@material/button/button" as mdc-button;
@use '@material/button/button-theme' as mdc-button-theme;
@use '@material/button/button-text-theme' as mdc-button-text-theme;
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
@use '@material/theme/theme-color' as mdc-theme-color;

button {
    @include mdc-button-text-theme.theme(
        (
            label-text-color: red,
        )
    );    
}

Run the SASS CLI watch command with the --load-path=node_modules option such that modules are resolved from node_modules.

sass --watch test.scss:test.css --load-path=node_modules

If we look at test.css we can see that the mdc-button-text-theme.theme mixin produced the following CSS for us.

button {
  --mdc-text-button-label-text-color: red;
}