Created
February 6, 2019 19:16
-
-
Save balbuf/8cbb70a317c6c4a0b594f95f60f34214 to your computer and use it in GitHub Desktop.
"supports" SASS mixin that provides minimal DRY benefits
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin supports($property-dec) { | |
// find position of colon in property declaration | |
$colon: str-index($property-dec, ':'); | |
// extract the property | |
$property: str-slice($property-dec, 1, $colon - 1); | |
// extract the value | |
$value: str-slice($property-dec, $colon + 1); | |
// trim leading spaces | |
@while (str-slice($value, 1, 1) == ' ') { | |
$value: str-slice($value, 2); | |
} | |
// wrap the property declaration in parens | |
$property-dec: '(' + $property-dec + ')'; | |
// output the ish | |
@supports #{$property-dec} { | |
#{$property}: #{$value}; | |
@content; | |
} | |
} | |
// example SASS | |
div { | |
@include supports('filter: drop-shadow(0 0 15px white)') { | |
display: none; | |
} | |
} | |
// outputs CSS | |
@supports (filter: drop-shadow(0 0 15px white)) { | |
div { | |
filter: drop-shadow(0 0 15px white); | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I just whipped this up as a proof of concept - it would need more work to be fully useful.