Skip to content

Instantly share code, notes, and snippets.

@balbuf
Created February 6, 2019 19:16
Show Gist options
  • Save balbuf/8cbb70a317c6c4a0b594f95f60f34214 to your computer and use it in GitHub Desktop.
Save balbuf/8cbb70a317c6c4a0b594f95f60f34214 to your computer and use it in GitHub Desktop.
"supports" SASS mixin that provides minimal DRY benefits
@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;
}
}
@balbuf
Copy link
Author

balbuf commented Feb 6, 2019

I just whipped this up as a proof of concept - it would need more work to be fully useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment