- Sassを使い始めた
- メディアクエリを効率的に書きたい
こんな方向け。
CSSをいい感じにした「Sass」。CSSよりもコード量が少なく、かつ、見た目もスッキリしていて可読性に優れていることからSassを使っている人も多いと思います。
わたしもWeb制作会社に就職してからはCSSではなく、Sassでコーディングしています。
今回は、Sassを使ってメディアクエリを効率的に書く方法をカンタンに解説します。取り急ぎこの書き方を覚えれば、Sassを使って便利にメディアクエリを書くことができます。
CSSとSassを比較
まず、CSSで書いた場合がこちら。
.logo {
display: block;
width: 170px;
}
@media screen and (max-width: 767px) {
.logo {
width: 100px;
}
}上記CSSをSassで書くと・・・
.logo {
display: block;
width: 170px;
@include media("sp") {
width: 100px;
}
}↑のようになります。Sassでこの書き方をすると、自動的にCSSに変換（コンパイル）されます。
初めての方は「@include」でなんだよ…」と思うかもしれませんので、「【入門】Sassの基礎」を読んでみてください。
Sassでメディアクエリを書く方法！
Sassでは「変数」という概念があります。
あらかじめ好きな名前（変数名）を決めて値を代入しておくことで、任意の場所で変数名を参照して値を呼び出す機能のことです。
つまり、あだ名（ニックネーム）です。よく使うパーツにあだ名を決めて、使うときにあだ名を参照するイメージです。
実物がこちら。
$breakpoints: (
'sm': 'screen and (min-width: 576px)',
'md': 'screen and (min-width: 768px)',
'lg': 'screen and (min-width: 992px)',
'xl': 'screen and (min-width: 1200px)',
) !default;
@mixin media($breakpoint) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}
.logo {
display: block;
width: 100px;
@include media("lg") {
width: 170px;
}
}コンパイル（変換）されたCSSがこちら。
.logo {
display: block;
width: 100px;
}
@media screen and (min-width: 768px) {
.logo {
width: 170px;
}
}なお、上記の変数はスマホファーストで書いたメディアクエリです。
PCファーストの場合
PCファーストで書く方も多いと思うので、それがこちらです。
$breakpoints: (
'sm': 'screen and (max-width: 575px)',
'md': 'screen and (max-width: 767px)',
'lg': 'screen and (max-width: 991px)',
'xl': 'screen and (max-width: 1199px)',
) !default;
@mixin media($breakpoint) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}
.logo {
display: block;
width: 170px;
@include media("sm") {
width: 100px;
}
}最後に：Sassは実務で、物すっっごくよく使う。
以上、Sassを使ってメディアクエリを書く方法でした。
一瞬だけ余談ですが、Web制作会社の実務ではCSSは使う機会がなく、ほぼSassしか使いません。
正直いうと、わたしはSassの勉強をスルーしていました。
- 自分一人でコーディングするから、、、
- 10ページ程度の小規模サイトだから、、、
- Sassを覚えるのがめんどくさいから、、、
とSassから逃げていました。が、Web制作会社に入ってびっくり。ほぼほぼSassしか使いません。なので、今こうしてSassを必死に学習しています苦笑
今のうちからSassをマスターしておこう
なので、失敗したわたしからのメッセージは「学習段階でSassをやっておこう！」です。覚えることが増えて大変ですが、わたしの経験上Sassは思ったより難しくありません。
むしろ「なんでやらなかったんだ〜」と後悔するほどカンタンだし便利です。
今ではSassの魅力に取り憑かれてしまい、Sassをマスターするために本やYouTubeなどで勉強しつつ、実務でコーディングしています。
何から手をつけていいかわからない人は、一旦下記の教材（動画も含む）から始めてみるといいかなと思いますのでよろしければどうぞ。
- Web制作者のためのSassの教科書 改訂2版
- 【入門編】Sassを導入しよう！CSSをもっと効率的に＆早く書く方法【HTML・CSS コーディング】
- 【超便利】SASSを導入せよ【HTML/CSSコーディング】
よきコーディングライフを〜！
コメント