Sass mixinを使ってメディアクエリの指定を効率化

CSS-Tricks.comでメディアクエリの記述を便利にするmixinが紹介されていたので、それをベースに自分なりのmixinを考えてみました。CSS-Tricksで紹介されているものはブレイクポイントが固定されたものですが、ブレイクポイントを自由に指定できるものにしてみました。ちょっとした効率化ですが、メディアクエリを使ったデザインの調整が多くなればなるほど、便利に使えるのではないかと。。。

メディアクエリが増えてしまう？

このmixinはメディアクエリを要素ごとに記述することを前提としています。そのため、メディアクエリの記述が多くなってしまいます。多少気持ち悪い感じはするのですが、小規模プロジェクトでは記述が多くなることでパフォーマンス的にあまり影響はないようです。

Sass

Sass 3.2以上が必要な記述方法です。

@mixin addquery($point) {
  @media screen and (max-width: $point) { @content; }
}

content-width {
  width: 75%;
  @include addquery(60em) { width: 80%; }
  @include addquery(40em) { width: 85%; }
  @include addquery(20em) { width: 95%; }
}

CSS

「output_style = :expanded」でコンパイルされたCSS

.content-width {
  width: 75%;
}
@media screen and (max-width: 60em) {
  .content-width {
    width: 80%;
  }
}
@media screen and (max-width: 40em) {
  .content-width {
    width: 85%;
  }
}
@media screen and (max-width: 20em) {
  .content-width {
    width: 95%;
  }
}

2013年もよろしくお願いします！

2013年はSass関連の記事から初めてみました。Sassはまだまだ勉強中ですが、Scssシンタックスで記述すればCSSと互換しているので使いたい機能に限定して使うことができます。GUIツールを使えば、設定も簡単ですしCSS制作の効率化に使わない手はないなぁと感じています。昨年後半はレスポンシブWebデザインに関する本の執筆でなかなかこちらのブログが更新できませんでしたが、今年もどうぞよろしくお願いします。

参考リンク

• Media Queries, Sass 3.2, and CodeKit — CSS Tricks
• Sass and Media Queries — SassCast
• Breakpoint — Sassのライブラリ（？）
• テスト： Media Queriesを要素ごとに記述した場合 vs まとめて書いた場合
• Sass::MediaQueryCombiner — 複数カ所に記述した同じメディアクエリを統合してくれるツール

2013年1月4日に公開され、2017年11月23日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存