CSSのメタ言語であるSassを覚えたらメチャクチャ便利でした。
今回は、中でも特に便利だと思った変数を使ったブレイクポイントの管理について解説します。
メディアクエリを簡潔に記述する
CSSを使ってメディアクエリを書く場合、以下のようなコードになります。
これは幅が768px以下のときだけスマホ用のメニューバーを表示する場合の例です。
768pxを超えたら display: none; を適用するためだけに、5行も記述しなければいけません。
/*スマホ用のメニューバー*/
#navbar {
background-color: #f6b352;
color: #fff;
text-align: center;
padding: 4px 0;
cursor: pointer;
}
@media (min-width: 768px) {
#navbar {
display: none;
}
}同じコードをSass（Scss記法）で書くと以下のように書けます。
/*スマホ用のメニューバー*/
#navbar {
background-color: $accentColor;
color: #fff;
text-align: center;
padding: 4px 0;
cursor: pointer;
@include md {
display: none;
}
}メディアクエリの部分が3行になりましたね。
＠includeを使って＠mixinで定義したコードを呼び出しています。
＠mixinでメディアクエリを記述しておく
＠mixin 名前 のようにコードを記述しておくと、@include 名前 でコードを呼び出せます。
また、@includeの中に書いたコード（この場合は display: none;）は @content の部分に記述されます。
@mixin sm {
@media (min-width: ($sm)) {
@content;
}
}
@mixin md {
@media (min-width: ($md)) {
@content;
}
}
@mixin lg {
@media (min-width: ($lg)) {
@content;
}
}
@mixin xl {
@media (min-width: ($xl)) {
@content;
}
}メディアクエリで指定している$smや$mdは変数です。
SassではCSSと異なり変数を利用することができます。
僕は変数を記述するためのファイルを別に用意して、以下のようにブレイクポイントを管理しています。
こうすることで、後からブレイクポイントを変更する必要が出たとしても最小限の修正で済みます。
$sm: 576px; $md: 768px; $lg: 992px; $xl: 1200px;
＠mixinで引数を渡す
@mixin は引数を渡すこともできます。
ブレイクポイントの数だけ @minin を書くのが面倒であれば、以下のような記述もできます。
@mixin break($breakPoint) {
@media (min-width: ($breakPoint)) {
@content;
}
}この場合、768pxを超えたら非表示にするコードは以下のようになります。
@include break($md) {
display: none;
} Sass（Scss記法）は敷居も低いので覚えるべき
SassにはSass記法とScss記法がありますが、Scss記法はCSSと同じように記述しても動きます。
ですので、CSSはわかるけどプログラミングはあまり経験がないといった方でも勉強しやすいです。
プログラミングをかじったことある人は、すんなり理解できるしCSSには戻れなくなるでしょう。
変数、条件分岐、関数といった便利な機能が使えますし、行数も少なく読みやすいです。
まあ、CSSにもCSS変数とかあるらしいんですけどね。
その辺りはまだ僕も勉強していないので、習得したらそのうち記事にします。
Sassの勉強は、Progateのレッスンをやって参考書を読むのがよいでしょう。
僕は普段、参考書を全力でおすすめしません。
人によって参考書との相性があると考えているので、僕はこれを使って勉強したというのを紹介しています。
ですが、この参考書は全力でおすすめします！
実用的な解説が多く、手元に置いておきたいと思える1冊です。
そもそもSassの参考書ってそんなに種類ないんだよね。
コーディングはBracketsがおすすめです。
プラグイン入れるだけで自動でコンパイルしてくれるようになります。
まだCSS使ってるの？
時代はSassですよ。使ってない人は導入しましょう。