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デザインに関する本の執筆でなかなかこちらのブログが更新できませんでしたが、今年もどうぞよろしくお願いします。

参考リンク

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です