本記事では、Sassの@mixin(ミックスイン)を使って、メディアクエリを指定する方法を解説します。
@mixinを使えば、コード量をかなり抑えられコーディングを爆速で進められるのでぜひ覚えましょ!
目次
【コピペ用】@mixinを使ってメディアクエリを指定する方法
下記がコードの全文です。(読みやすいように改行を入れています。)
使用しているstyle.scssにコピペすれば@includeでメディアクエリを呼び出せます。
// 変数定義
$pc: 1024px;
$tab: 768px;
$sp: 480px;
// mixin定義
@mixin pc {
@media (min-width: $pc) {
@content;
}
}
@mixin tab {
@media (max-width: $pc) and (min-width: $tab) {
@content;
}
}
@mixin sp {
@media (max-width: $tab) {
@content;
}
}
// 使用例
.my-class {
// PCのメディアクエリ
@include pc {
font-size: 14px;
}
// タブレットのメディアクエリ
@include tab {
font-size: 14px;
}
// SPのメディアクエリ
@include sp {
font-size: 12px;
}
}
以下からひとつひとつの手順を解説します。
手順1:変数と@mixin(ミックスイン)を指定する
まず各メディアクエリのブレークポイントを変数で管理します。
// 変数定義
$pc: 1024px;
$tab: 768px;
$sp: 480px;
この部分ですね。任意のpx数を指定してください。こうしておくことで途中でブレークポイントを変えないといけないときも変数の値を変更するだけですべてに適用できます。
次にmixinを作ります。
// mixin定義
// PCサイズ
@mixin pc {
@media (min-width: $pc) {
@content;
}
}
// タブレットサイズ
@mixin tab {
@media (max-width: $pc) and (min-width: $tab) {
@content;
}
}
// SPサイズ
@mixin sp {
@media (max-width: $tab) {
@content;
}
}
これだけ見るとめちゃくちゃ分かりづらいですが、ミックスインの構文がわかればなんとなく理解できるはず。
@mixinの詳細はまた別の記事で解説します。
手順2:@includeで@mixinを呼び出す
次に@includeで定義したミックスインを呼び出します。実際に使い方を見たほうが早いので下記。
(.my-classには好きなセレクタ名を指定してください)
// 使用例
.my-class {
// PCのメディアクエリ
@include pc {
font-size: 14px;
}
// タブレットのメディアクエリ
@include tab {
font-size: 14px;
}
// SPのメディアクエリ
@include sp {
font-size: 12px;
}
}
CSSのコンパイル結果はこうなります。
@media (min-width: 1024px) {
.my-class {
font-size: 14px;
}
}
@media (max-width: 1024px) and (min-width: 768px) {
.my-class {
font-size: 14px;
}
}
@media (max-width: 768px) {
.my-class {
font-size: 12px;
}
}
こんな感じで、メディアクエリがかんたんに指定できるぜい!!
まとめ
Sassの@mixinを使いこなせばメディアクエリの指定もメチャクチャ簡単になってコード量も格段に減ります。実務では必ず使うので、覚えておくとよいですよ〜っと
それではっ!よきSassライフを