[mdc-card] SASS mixin names potentially wrong in readme

Bug report

The mdc-card readme indicates that there should be a sass mixin called filled-color($color). There’s no text indicating anything about a namespace. So, I try

 @use '@material/card/mdc-card';
div {
       @include fill-color(#DADCE0);
}

I get the error

SassError: Undefined mixin. pointing at the fill-color. But, sass mixin names are all over the place for MDC, so I know to try the following, just in case

mdc-card-fill-color

card-fill-color

Neither work.

I’m looking through various files in the mdc-card node_module folder, but I don’t see anything indicating that the mixin should be anything other than just fill-color. I have other mixins working on this repo, so it’s not a general issue with SASS imports.

Note, if i do

 @import '@material/card/mdc-card';

div {
       @include mdc-card-fill-color(#DADCE0);
}

It works.

Your Environment:

Software	Version(s)
MDC Web	“@material/card”: “^5.1.0”,

| Browser | chrome | Operating System | Ubuntu 18.04

"sass": "^1.26.2",
"sass-loader": "^8.0.2",

[asyncLiz]

Refer to the Sass module system for information on how Sass modules work. The @use syntax defines the prefix. If no prefix is explicitly provided, it will default to the file name of what you’re importing.

@use "@material/card/mdc-card"; // generates classes for .mdc-card
@use "@material/card"; // does not generate classes, is used to access mixins and variables

div {
  // The prefix for @use "@material/card" is `card`
  @include card.fill-color(#DADCE0);
}

Let me know if that helps!

[mbestavros]

I’d like to chime in and echo @komali2’s concerns… the current SASS mixins documentation is deeply unhelpful across the board. Consider the Buttons page as an example – as a relative beginner, I had no idea that this:

@use "@material/button/mdc-button";

is not how I was supposed to import mdc-button to use the Sass mixins. This is also the only example provided in the documentation, and the SASS mixins section doesn’t mention anything about importing the component any differently than specified at the top of the page.

I found the solution to my problem by looking at this bug. That’s not good developer UX.

/rant