【Sass】hoverはメディアクエリのwidthではなくhoverで分岐させると楽ちん

この記事は、Sassを使用している方向けになります。

webpackでのSassのコンパイル方法を知りたい方は、以下の記事をご覧くださいませ！

[webpack]ど初心者がjsをコンパイルできるようにしてみた(for mac)初心者には難しいwebpackでのコンパイル…挫折した経験をもとに、わかりやすく解説いたします！（js編）...

[webpack]ど初心者がscssをコンパイルできるようにしてみた(for mac)初心者には難しいwebpackでのコンパイル…挫折した経験をもとに、わかりやすく解説いたします！（sass編）...

最初に結論
- mixinを定義
- mixinを使う時
コードの説明
最近のサイトでは
注意点

最初に結論

最初に結論を言ってしまうと、私はしばらく以下のやり方でやっていこうと思いました。

mixinを定義

@mixin hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
    @media (hover: none) {
        &:active {
            @content;
        }
    }
}

mixinを使う時

.sample {
  background-color: red;
  @include hover {
    background-color: blue;
  }
}

これで、パソコンなどのカーソルがあるデバイスではhover、
スマホやダブレットなどのタッチデバイスではactiveが適用され、
コンパイル後は以下のように出力されます。

.sample {
  background-color: red;
}

@media (hover: hover) and (pointer: fine) {
    &:hover {
        background-color: blue;
    }
}

@media (hover: none) {
    &:active {
        background-color: blue;
    }
}

コードの説明

(hover: hover)

ユーザーがhoverに対応しているデバイスの場合の設定ができます。

(hover: none)

hoverとは逆に、ユーザーがhoverに対応していないデバイスの時の設定ができます。

(pointer: fine)

ユーザーが（マウスなどの）ポインティングデバイスを持っている場合の設定ができます。

@media (hover: hover) and (pointer: fine)

とすることで、
「ユーザーがhoverに対応しているかつポインティングデバイスを持っている場合」
のCSSを設定することができます。

注意点

メディアクエリでのhoverやpointerはInternet Explorerでは使用できないため、サイトをInternet Explorerにも対応させる場合は、以下のようにしましょう。

@mixin hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
    @media (hover: none) {
        &:active {
            @content;
        }
    }

    // Internet Explorer用の設定
    @media all and (-ms-high-contrast: none) {
        &:hover {
            @content;
        }
    }
}