macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

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

CSS プログラミング

Sassは簡単にスタイルを記述できる便利なものって思ってませんか?

私はその真価を体感するのはメディアクエリを使用した時だと思っています。

コピペで誰でも使用できる形で公開していますので、独学中の方や今から始めようとしている方は参考にどうぞ。Sassの真価を感じて下さい。

なぜSassはメディアクエリでこそ真価がわかるのか?

以下3つがポイントです。

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

CSSでメディアクエリをちまちまと指定する必要はありません、入れ子をチェックする必要もありません。

Sassの真価を見て下さい。

スポンサードサーチ


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

CSSでメディアクエリいちいち指定するのめんどくさいですよね、たくさん作ると管理するのもめんどくさいし。

かといってまとめるのもめんどくさい。笑

これから紹介するSassを使えば簡単に指定できて、簡単に管理できるようになります。

分かりやすいように別々で紹介しますね。

  • 変数とミックスインで管理しやすくする
  • 実際に使用してみる

変数とミックスインで管理しやすくする

下記をコピペしましょう。

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行目で変数を用意しています、メディアクエリの値を変更する際にはこの変数の値を変えるだけなので管理が楽になります。

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;
  };
}

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

これがコンパイルされるとどうなるかというと、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; 
  } 
}

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

どうですか?すごくないですか?

メディアクエリを一度ミックスインで用意して、使う際には適用させたいものをインクルードで呼び出すだけです。

終わりに

Sassって便利だなぁって実感する瞬間ではないでしょうか?

レスポンシブ化が当たり前とされる今では、かなり実用的なテクニックだと思います。

まだSassを触ったことがない方はこの機会にでも触れてみましょう!世界が変わりますよ。

以上になります。