Sublime Text で散らかりがちなMedia Queryをまとめる

スマホ、タブレット用にCSSを書く時、気を抜くとページ内にいくつも書くことになってしまう Media Query。

以前はSassを使ってPC用、SP用のScssファイルを用意して対応しましたが、Sublime Textのパッケージでまとめることが出来たので、メモ。

必要なもの

• SublimeCombineMediaQueries
• group-css-media-queries

SublimeCombineMediaQueries

こちらはPackage Controlにまだないので、Githubから落とします。

GitHub - astronaughts/SublimeCombineMediaQueries: Sublime Text Package for grouping CSS media queries.

ダウンロードしてきたものを解凍し、Packageディレクトリに CombineMediaQueries という名前で設置します。

group-css-media-queries

npmからもってきます。

github.com

$ 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でやったほうがいいかも。

www.npmjs.com

まぁ、ケース・バイ・ケースで使い分けていこうかなぁ。