You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are two ways to avoid passing a required param to a mixin: empty params (@include some-mixin();) and no params (@include some-mixin;). However, they behave differently.
Empty Params Example:
/* Mixin with no defaults */@mixin heading-text($font-size) {
font-size: $font-size;
}
/* Using empty param form results in empty value instead of error */h1 {
@includeheading-text();
}
Output:
/* Mixin with no defaults *//* Using empty param form results in empty value instead of error */h1 {
font-size: ; /* <= ERROR */
}
This is invalid CSS.
No Params Example:
/* Mixin with no defaults */@mixin heading-text($font-size) {
font-size: $font-size;
}
/* Using no param form results in PreCSS throwing */h1 {
@include heading-text;
}
Output (throws):
Message:
precss: /.../main.css:3:5: Could not resolve the variable "$font-size" within "$font-size"
1 | /* Mixin with no defaults */
2 | @mixin heading-text($font-size) {
> 3 | font-size: $font-size;
| ^
4 | }
5 |
This is confusing because the issue is at the site of the @include, not at the @mixin. ("What do you mean you can't resolve the variable?! It's RIGHT THERE!")
I do not know what the correct answer should be, only that it should be consistent. I see two reasonable options:
Output the CSS without the result of the mixin's failed operation (and maybe a warning about what happened).
h1 {}
Throw with a more specific error, like:
Message:
precss: /.../main.css:8:5: Included mixin without required variable "$font-size"
6 | /* Using empty param form results in empty value instead of error */
7 | h1 {
> 8 | @include heading-text;
| ^
9 | }
The text was updated successfully, but these errors were encountered:
Related to: #76
There are two ways to avoid passing a required param to a mixin: empty params (
@include some-mixin();
) and no params (@include some-mixin;
). However, they behave differently.Empty Params Example:
Output:
This is invalid CSS.
No Params Example:
Output (throws):
This is confusing because the issue is at the site of the
@include
, not at the@mixin
. ("What do you mean you can't resolve the variable?! It's RIGHT THERE!")I do not know what the correct answer should be, only that it should be consistent. I see two reasonable options:
h1 {}
The text was updated successfully, but these errors were encountered: