<===> input.scss
@function shift($list) {
@if length($list) == 1 { @return (); }
$new: ();
@for $i from 2 through length($list) {
$new: append($new, nth($list, $i));
}
@return $new;
}
@mixin media($medias...) {
@if length($medias) == 0 {
@content;
} @else {
@media #{nth($medias, 1)} {
@include media(shift($medias)...) {
@content;
}
}
}
}
.foo {
@include media('only screen', '(color)', '(orientation: portrait)') {
content: bar;
}
}
@include media('all', '(min-width: 42em)') {
.foo {
content: bar;
}
}
<===> output.css
@media only screen and (color) and (orientation: portrait) {
.foo {
content: bar;
}
}
@media all and (min-width: 42em) {
.foo {
content: bar;
}
}
<===> output-dart-sass.css
@media only screen and (color) and (orientation: portrait) {
.foo {
content: bar;
}
}
@media (min-width: 42em) {
.foo {
content: bar;
}
}