[SCSS]supports()を書き出すmixin

CSSのat-rulesであるsupportsとsupports notを簡単に書き出すmixinの紹介です。

現場で役立つ実践Sass（4）MixinとExtendの使いどころで紹介されている書き方をさらに使いやすくアレンジしたものになります。
メディアクエリーをmixinで管理している人も多いと思いますが、それらと組み合わせても便利なので是非ご利用ください。

コード

Mixinの設定

// supports
@mixin supports($property, $value) {
    $style : "#{$property} : #{$value}";
    $style : "(#{$style})";

    @supports (#{$style}) {
        #{$property} : #{$value};
        @content;
    }
}

// supports not
@mixin unsupports($property, $value) {
    $style : "#{$property} : #{$value}";
    $style : "(#{$style})";

    @supports not (#{$style}) {
        @content;
    }
}

書き方

.card {
    // supports()
    @include supports(display,flex); // (プロパティ,値)を引数に

    // supports not()
    @include unsupports(display,flex) { // (プロパティ,値)を引数に
        display : block; // 代替スタイルを記述
    }
}

コンパイルされたCSS

@supports (display : flex) {
    .card {
        display : flex;
    }
}

@supports not (display : flex) {
    .card {
        display : block;
    }
}

以上です。
mixinで処理することで、.class {...}内にまとめて書けるのが個人的に便利だと思う点です。

ちなみに、@supports(){...}には引数の他にスタイルを指定することが出来ます。

.card {
    // supports()
    @include supports(display,flex) {
        justify-content : center; // スタイルを追加することも出来ます
    }
}

コンパイルすると

@supports (display : flex) {
    .card {
        display : flex;
        justify-content : center;
    }
}

このようなCSSになります。

お役に立てたら幸いです。