12:05:56SaSSでメディアクエリをmixinでまとめるCSSHTML5SasscontentCSSmixinSassメディアクエリ目次(クリックするとジャンプします)1:メディアクエリをまとめる1.1:contentディレクティブを使った方法1.2:複数ブレイクポイントの場合2:もう少し改良できるかも2.1:mixinをさらにまとめたmixinでメディアクエリを一撃3:まとめ関連するこちらの記事もオススメVirtualBoxのネットワークの種類フレッツスポット(NTT-Spot)に接続するとSoftApが使えなくなる件wordpressで使ってみるajaxの基本adminerでセッションパスのパーミッションエラーが出る原因と解消方法[javascript]即時関数の基本的な記述方法PHPで特殊文字をエスケープ(クオート)するpreg_quote関数PHPでGDライブラリを使って画像リサイズ(サムネイル画像を作る)をやってみるMarkDown変換コマンドラインツール「Pandoc」を使うメディアクエリをまとめる多くの場合ブレイクポイントを何箇所か設定するかと思います。するとブレイクポイントに対してひとまとめにCSSを記述できると楽ですよね。SaSSでメディアクエリを扱う時はmixinを使うとメディアクエリを容易に設定することが出来便利です。一箇所ごとに書く場合は以下のようなmixinが考えられます。}}contentディレクティブを使った方法ですね。contentディレクティブを書くと、ブロックコンテンツを受け取ることができます。実際に使う時は以下のように使うことができます。}}これは以下のように展開されます。上記の方法で複数のブレイクポイントの場合は以下のように行います。ブレイクポイントごとにmixinを作ります。}}これをこのように使います。}}これは以下のように展開されます。}}おお!便利ですね。この方法のいいところは書きたい場所にメディアクエリを入れることができることです。これによってブレイクポイントごとの記述を一箇所に集めることができ、コードの見通しがよくなります。改良できるかもただ、メディアクエリが欲しい場所にブレイクポイント分のmixinをいちいちincludeするのは面倒なきもします。mixinでまとめて使いやすくしてみます。mixinmixinですね。通常ブレイクポイントは1セットとして使うと思うので、あまり1つのブレイクポイントだけを書くことは無いのではないかと思います。あれば、配列でプロパティを値を与えられるようにして、mixinを1つ記述するだけですべてのブレイクポイントに対しての記述できれば便利ですよね。mixinをさらにまとめたmixinでメディアクエリを一撃それを企図して作ったmixinが以下です。contentディレクティブは使っていませんが、代わりにプロパティと値を受け取れるようになっています。6));}プロパティと各ブレイクポイントでの値は1セットになることが多いかと思うので、配列を渡す形にしています。配列の構成は1番目にプロパティ名、2番目以降が各ブレイクポイントの値を想定します。配列から値を取り出すのにはnth関数を使います。index)配列変数とインデックス番号を指定します。これで対応する値が取得できます。多くのプログラミング言語において配列のインデックスは0から始まりますが、SaSSでは1から始まりますので注意してください。実際に使う時は以下の様に記述します。60%);}例で配列は()の中でベタ書きしています。カンマ無しで空白区切りで値を書いていくと配列とみなされますので単純な値の場合はこの書き方でもOKです。空白区切りの値、たとえばmarginなどの全方向指定などはこの書き方ができないので、予め配列を作ってから行うのが良いかと思います。配列変数を事前につくる場合は、以下のような感じになります。例ではローカル変数としていますが、もちろんグローバル変数でも大丈夫ですよ。nth($var,6));}これは以下のように展開されます。}ちゃんと値が与えられていますね。これでメディアクエリに尻込みすることなくバンバン記述することができそうです。やった!まとめメディアクエリをまともに書くとほんとに苦労するんですよね...。色んな所にCSSが飛び散っちゃうので修正があると直すのが大変です。SaSSは本当に便利ですね。今までCSSを効率よく書けなくて悩んでいたのがうそのようです。早く使えばよかったですよ。mino長年働いていた会社をリストラされてしまったおっさん。なにを思ったか未経験のプログラミングで再起を図ろうとする。プログラミングを勉強していく上で苦しんだこと、ハマったことを中心に記事を書きます。