Menu
I want to add !important to a mixin. I tried both the following ways, and they return an error:
@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)); !important
@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)) !important;
Is there a way to do this correctly?
432
Sass Mixins The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.
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.
Mixins are a language concept that allows a programmer to inject some code into a class. Mixin programming is a style of software development, in which units of functionality are created in a class and then mixed in with other classes. A mixin class acts as the parent class, containing the desired functionality.
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.
For some situations, I use a optional parameter named $important which I can pass in true.
Example:
my-mixin($important: true);
It would look something like that, with a helper function to avoid repetition on the properties that I have to toggle important:
@function if-important($important){
@return #{if($important, '!important', '')};
}
@mixin my-mixin($important: false) {
border-radius: 0; //whatever
border: 1px solid #ccc if-important($important);
background-color: #fff if-important($important);
color: #000 if-important($important);
}
!important cannot be used in a mixin. Refer the following links.
Adding !important using a Compass Mixin
https://github.com/cloudhead/less.js/issues/547
):
22
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
