【コピペOK】Sassで簡単にメディアクエリを使用する方法

Sassは簡単にスタイルを記述できる便利なものって思ってませんか？、、、間違ってはいませんがその認識だけじゃ勿体ない、Sassの真価を体感できるのはメディアクエリを使った時です。

Sassで便利なメディアクエリの書き方【コピペOK】

CSSでメディアクエリを指定するのってめんどくさいですよね、たくさん作ると管理も大変だし、工夫してまとめるにしても少し手間がかかるので正直だるいです。

そこで、これから紹介するSass式メディアクエリを使えば、コード量もグッと減り、width指定も一括で管理できるようになるので管理コストも大幅に減らせます。

①：変数とミックスインで定義

下記をコピペしてください。

style.scss

$pc: 1024px; // PC
$tab: 680px; // タブレット
$sp: 480px;  // スマホ

@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

• 1～3行目：変数を用意しています、width（横幅）を変更する際はここの値を変えてください。
• 5行目：「pc」の部分は使用する時に呼び出す名前になります、分かりやすいよう上記のようにデバイスで統一するのが一般的です。
• 6行目：さきほど用意した変数を渡すことでメディアクエリとして成り立たせています。

とりあえず準備はこれだけ、実際に使ってみましょう。

実際に使用してみる

例えば下記のような要素があった場合。

<div class="box">ボックス</div>

上記の.boxにメディアクエリを適用してみましょう。

style.scss

.box {
  @include pc {
    background-color: red;
  };
  @include tab {
    background-color: blue;
  };
  @include sp {
    background-color: yellow;
  };
}

インクルードで先ほど用意したミックスインをそれぞれ呼び出すだけですね。

これがコンパイルされるとどうなるかというと、生成されたCSSファイル（style.css）を見てみましょう。

style.css

@media (max-width: 1024px) {
  .box {
    background-color: red;
  } 
}
@media (max-width: 680px) {
  .box {
    background-color: blue;
  } 
}
@media (max-width: 480px) {
  .box {
    background-color: yellow; 
  } 
}

※見やすいように一部改行入れています。

まとめ

いかがでしたでしょうか、便利だ！ってなりませんか？、、、やった事といえば変数とミックスインを使ってメディアクエリを定義し、使う際には適用させたいものをインクルードで呼び出すだけです。

これを覚えておけば、CSSでメディアクエリをちまちまと指定する事はなくなり、コーディングは爆速になります、レスポンシブ化が当たり前とされる今だからこそ覚えておくべき実用的なテクニックかなと思います。

まだSassを触ったことがない方はこの機会にでも触れてみましょう！きっと世界が変わります、今回は以上になります。

今回使用したSassの機能・ポイント

• 変数が使用できる($～)
• ミックスインの活用(@mixin)
• インクルードの活用(@include)

他の人が読んでいる記事