SafariだけにCSS適用するためのmixinを作りました


最近ちょくちょく書くことがあり、どうせならmixin書いたほうが早いやとなったので。

mixin.scss
@mixin safari {
  @at-root _::-webkit-full-page-media, _:future, :root & {
    @content;
  }
}
main.scss
.selector {
  background-color: yellow;
  @include safari {
    background-color: pink;
  }
}

↑みたいに書くと、↓にコンパイルされます

main.css
.selector {
  background-color: yellow;
}

_::-webkit-full-page-media, _:future, :root .selector {
  background-color: pink;
}