BLOG

レスポンシブのコーディングにこそSASS

sassでコーディングを始めてかれこれ1年以上たちます。僕の中でsassを定着させたのはレスポンシブデザインのコーディングのときです。 むしろレスポンシブでコーディングするときこそsassは大活躍します!とちょっとテンション高めですが、気にしないで下さい。

メディアクエリをつかったレスポンシブのコーディングではブレイクポイントと呼ばれるレイアウトの分岐ポイントがあります。 通常は

のような感じの記述になり同じセレクタでスタイルが違うと3箇所に記述しなくてはなりません。最初のうちはコードが少ないので3箇所に記述するのもそれほど億劫にはならないかもしれませんが記述が増えれば増える程面倒な作業になってきます。

sassではセレクタの記述をコンパイル時にブレイクポイント毎に分散させることができます。

バシャログさんの【Sass】Sassでレスポンシブ!メディアクエリを便利に書こう。

でその方法が紹介されていました。

これは目から鱗でした!記事のタイトル通り便利にメディアクエリが便利に書けます。便利にメディアクエリが書けすぎます!

ブレイクポイントを「styles.scss」にスタイルを「_media-query.scss」に記述します。_を付け忘れててもコンパイルは通りますがエラーだらけのmedia-query.cssが生成されますので_を付け忘れないで下さい。

styles.scss

styles.scssにはブレイクポイントを記述します。

_media-query.scss

_media-query.scssにスタイルを記述します。

styles.css

コンパイルされたstyles.cssの内容です。

ブレイクポイント毎に分散してコンパイルしてくれると記述がやっぱり楽になりますし、前後のつながりも把握しやすいです。結果統一性のあるCSSがかけることにもつながるのかなぁと思います。 これができるって言うだけでsassでコーディングする意味があります!

    Sponsored Links