I'm trying to create a Sass mixin that takes a class as it's argument:
@mixin myMixin($el){
> #{$el}{
background: white;
}
}
.myClass1{
@include myMixin(div);
}
The above code works fine. I.e., elements are accepted.
But this calls an error:
.myClass1{
@include myMixin(.myClass);
}
I've tried wrapping it in quotes and #{}
but still no dice.
Curiously, the *
selector also does not work.
Variable argument is used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin. Keyword arguments passed to the mixin can be accessed using keywords($args) function which return values mapped to String.
Keyword arguments: The arguments are used to include in mixins. These types of arguments, if named, can be passed in any order and their default values can be skipped.
@mixin is used to group css code that has to be reused a no of times. Whereas the @extend is used in SASS to inherit(share) the properties from another css selector. @extend is most useful when the elements are almost same or identical.
You need to quote your class:
.myClass1{
@include myMixin(".myClass");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With