【Sass】Map(連想配列)データを利用しメディアクエリを@mixinで定義|CSSの値を1箇所で管理

レスポンシブデザインでは、画面サイズによってメディアクエリを変更しデザインを切り替えることが多くありますが、今回はそのメディアクエリを@mixinで定義し、CSSのプロパティの値を1箇所で管理する方法となります。
メディアクエリを@mixinで定義し、@includeで呼び出す例
今回の例では、まず、メディアクエリを@mixin(ミックスイン)を使い定義し、CSSのプロパティの値を1箇所で管理できるようにします。
そして、定義した@mixinを@includeで呼び出すことにより、指定したメディアクエリを簡単に使えるようにします。
メディアクエリを@mixinで定義
以下が@mixinを定義するソースコードの例となります。
// キーを「@includeで指定する引数」、値を「min-widthのサイズ」として、Mapのデータ型(連想配列)を作成
$break-point: (
more-sm: 768px,
more-md: 992px,
more-lg: 1200px
);
// メディアクエリを@mixinで定義
@mixin media-queries( $key ) {
@media ( min-width: map-get( $break-point, $key )) {
@content;
}
}
以下、ソースコードの説明となります。
Map(連想配列)データを作成
まずは、キーを「@includeで指定する引数」、値を「min-widthのサイズ」としてペアにし、Map(連想配列)で$break-pointを作成します。
@mixinを定義
次に、メディアクエリを@mixinで定義します。
@mixinでは関数名をmedia-queries()とし引数を変数$keyとします。そして、メディアクエリのmin-widthの値を関数map-get()で返します。
関数map-get()では、第1引数にMap、第2引数にキーを指定することにより、Mapのデータから指定したキーの値を返します。
@mixin media-queries()の引数と、関数map-get()の第2引数を同じ変数$keyにすることで、@includeで呼び出した際に、指定したメディアクエリを出力できます。
引数にMap(連想配列)のキーを指定し、@includeを呼び出す
以下のソースコードは、上記で定義した@mixinを@includeで呼び出す例となります。
.button{
display: none;
// @includeで呼び出し
@include media-queries( more-sm ) {
display: block;
}
}
定義した@mixin media-queries()を呼び出す際には、上記のように、 @include media-queries()の引数に$break-point内のいずれかのキーを指定します。
そのことにより、 そのキーとペアとなっている値を取得し、メディアクエリのmin-widthの値として出力しています。
上記の例では、@include media-queries()の引数にMapのキーmore-smを指定し、min-widthが768pxのメディアクエリを出力しています。
コンパイル後のCSSソースコード
今回の例で使用したSassのソースコードは、コンパイルされると以下のCSSになります。
Sassのコンパイルの方法については以下のリンク先を参考にしてみてください。
.button {
display: none;
}
@media (min-width: 768px) {
.button {
display: block;
}
}
また、メディアクエリ毎に対して、CSSのプロパティは同じで値のみを簡単に変更させたい場合は、以下のリンク先を参考にしてみてください。