Generate %placeholder utilities to @extend from
Created by: donquixote
Motivation: !important in utiliites
My colleague likes to use SASS @extend
with bootstrap utility classes, e.g.
header {
@extend .py-1;
}
I personally tend to disagree, but I guess it is a valid technique.
One problem when doing this is we also inherit the !important
part, which is reasonable on actual utility classes, but not in most of the @extend
use cases.
%placeholder
.
Proposed solution: Generate placeholder utilities in addition to the regular utilities, using SASS placeholder syntax. https://sass-lang.com/documentation/style-rules/placeholder-selectors They could then be extended like so:
header {
@extend %py-1;
}
This would have the same effect, but without the !important
.
Implementation
In the generate-utility(..)
mixin it would look like this:
@mixin generate-utility(..) {
[..]
// Generate the real utility.
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
// Generate placeholder utility.
%#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
#{$property}: $value;
}
}
I applied this as a quick hack, and it actually worked!
I was able to @extend
the generated placeholder utilities.
Userland workaround?
I was going to do this in custom code, but this would require to copy the entire generate-utility()
mixin.