Sass(Scss) : メディアクエリ用のミックスイン | Culture27先日、『Sass入門 〜より効率的なCSSコーディング』（※電子書籍のみです）にSass 3.2の内容を追加したので、記念にメディアクエリ用のミックスインを作りました。 @mediaルールを都度記述するのは面倒ですし、同じ要素やモジュールのスタイルを各@mediaルールに分けて書くことも面倒です。今回作ったミックスインを使えば、これらの問題を解決することができます。 出力したいCSSの例 要素やモジュール単位で書く方法 メディア特性ごとにスタイルを書く方法 2つの方法を一緒に使う 2つの任意のメディア特性に同じスタイルを適用したい場合 メディア特性ごとにCSSファイル自体を分ける場合 ミックスインと設定用の変数 出力したいCSSの例 例えば次のようなCSSを出力したい場合があるとします。 CSS /* 全てに適用 */ h1 { width: 100%; } p { line-height
