More than 3 years have passed since last update.

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

Posted at 2021-05-07

最近ちょくちょく書くことがあり、どうせなら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;
}