[mdc-card] SASS mixin names potentially wrong in readme
See original GitHub issueBug 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",
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Error passing a list to a SASS mixin: "] expected"
I'm passing a list to a SASS mixin and it works (no error in the browser or console) but my editor (VS Code)...
Read more >Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass.
Read more >mixin-loader - npm
A Webpack loader that prepends compass-mixins import directives to scss files. This loader acts as a Webpack preLoader and usually works ...
Read more >Using Sass Mixin for Media Query Is Wrong - WP Tips
Every Sass tutorial on the internet will teach you to use mixin for media queries. Why though? All it does is adding unnecessary ......
Read more >How to write reusable CSS with SASS - LogRocket Blog
Sass is a CSS preprocessor that is becoming vital in the ... What is wrong with CSS? ... @mixin {insert name} { //write...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.Let me know if that helps!
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:
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