Sublime Text で散らかりがちなMedia Queryをまとめる
スマホ、タブレット用にCSSを書く時、気を抜くとページ内にいくつも書くことになってしまう Media Query。
以前はSassを使ってPC用、SP用のScssファイルを用意して対応しましたが、Sublime Textのパッケージでまとめることが出来たので、メモ。
必要なもの
- SublimeCombineMediaQueries
- group-css-media-queries
SublimeCombineMediaQueries
こちらはPackage Controlにまだないので、Githubから落とします。
ダウンロードしてきたものを解凍し、Packageディレクトリに CombineMediaQueries
という名前で設置します。
group-css-media-queries
npmからもってきます。
$ npm install -g group-css-media-queries
インストール出来たらSublime Text を起動して、Preferences: Package Settings > CombineMediaQueries > Settings – User
を開き、自分のnode のパスを記載します。
nodeのパスを確認するのは、ターミナルからわかります。
$ where node /usr/local/bin/node
{ "bin_path" : "/usr/local/bin/node" // 上で調べたパスを記載 }
やってみよう
Media Queryがあちこちに散らばったCSSファイルを開いて、Shift + Control + C
を押すと・・・、
// これが .itemA { background-color: #f00; } @media screen and (max-width: 1200px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } @media screen and (max-width: 768px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } .itemB { background-color: #ff0; } @media screen and (max-width: 1200px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } @media screen and (max-width: 768px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } .itemC { background-color: #f0f; } @media screen and (max-width: 1200px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } @media screen and (max-width: 768px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } } // `Shift + Control + C`を押すと・・ .itemA { background-color: #f00; } .itemB { background-color: #ff0; } .itemC { background-color: #f0f; } @media screen and (max-width: 1200px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } a { display: block; flex: 0 1 200px; border: 1px solid #555; } a { display: block; flex: 0 1 200px; border: 1px solid #555; } } @media screen and (max-width: 768px) { a { display: block; flex: 0 1 200px; border: 1px solid #555; } a { display: block; flex: 0 1 200px; border: 1px solid #555; } a { display: block; flex: 0 1 200px; border: 1px solid #555; } }
うん、いい感じ。
でも実際にはSassコンパイルのタイミングで走らせたいから、gulp-combine-media-queriesとか使ってgulpでやったほうがいいかも。
まぁ、ケース・バイ・ケースで使い分けていこうかなぁ。