CSSコーディングでいますぐ使えるSass／Compass実践テク10連発！：爆捗！ WordPressテーマ作成ショートカット（6）（3/3 ページ）

» 2014年02月26日 18時00分公開

【8】CSSスプライトを手動設定したい

　CSSスプライトを自動ではなく手動で生成する方法もある。画像自体は作ってほしいが、「background-position」は自分で設定したいというようなときに利用できる。これは、CSSスプライトを生成するコマンドのみを実行させて、結果を変数に入れるという方法で実現できる。

　スプライトのみの生成には、下記のように設定する。

$｛変数｝ = sprite-map(｛スプライト名｝)

　CSSスプライトに内包されている画像の位置を取得する方法もある。それには、まず下記でCSSスプライトの情報を取得する

@include sprite-dimensions($｛変数｝,｛パーツ名｝);

　そして、下記で出力できる。

sprite-position($｛変数｝,｛パーツ名｝);

　これらをまとめると下記のようになる。

$cm: sprite-map("cm/*.png");
.bg-interview{
  background:$cm;
  @include sprite-dimensions($cm,interview);
  background-position: sprite-position($cm,interview);
}

.scss

　書き出し結果は下記だ。

.bg-interview {
  background: url('../images/cm-s532df9a30b.png');
  height: 40px;
  width: 249px;
  background-position: 0 -160px;
}

.css

　手動設定といっても変数をうまく使えるので、生成された画像をわざわざPhotoshopなどの定規で測らなくても大丈夫だ。

【9】CSS3 Media Queriesを簡単に作りたい

　Compassは、複雑なCSSをSassを使って簡単に記述していくことを目的として作成されたものだが、CSS3の中でもとりわけ面倒な「Media Queries」（メディアクエリ）を簡単に作る機能がない。

　これについては有用なミックスイン「SCSS Media Queries Mixins」を作っている方がいたので、紹介しておきたい。日本語で書かれているのでお試し拡張としても有用だ。

　上記「SCSS Media Queries Mixins」のGitHubの「scss」フォルダーに入っている「_media_queries.scss」をダウンロードして、「@import "media_queries"」する。そして、必要に応じて@include文でMedia Queriesを設定する。

　例えばPC用、タブレット用、スマホ用で下記のように設定するとしよう。

.test{
     @include mq_desktop('modern'){
               width:1000px;
     }
     @include mq_mobile('portrait','old')
     {
               width:320px;
     }
     @include mq_tablet('portrait','old')
     {
               width:768px;
     }
}

.scss

　すると、下記のように変換される。

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .test {
    width: 1000px;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-webkit-max-device-pixel-ratio: 1) {
  .test {
    width: 320px;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-moz-max-device-pixel-ratio: 1) {
  .test {
    width: 320px;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-o-max-device-pixel-ratio: 2 / 2) {
  .test {
    width: 320px;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-ms-max-device-pixel-ratio: 1) {
  .test {
    width: 320px;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) and (max-device-pixel-ratio: 1) {
  .test {
    width: 320px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {
  .test {
    width: 768px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-moz-max-device-pixel-ratio: 1) {
  .test {
    width: 768px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-o-max-device-pixel-ratio: 2 / 2) {
  .test {
    width: 768px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-ms-max-device-pixel-ratio: 1) {
  .test {
    width: 768px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (max-device-pixel-ratio: 1) {
  .test {
    width: 768px;
  }
}

.css

　このように、手打ちはもちろんだが、コピーペーストでもなかなか骨の折れる作業になるのが分かる。これが、ミックスイン一つで拡張できた。

【10】チーム内でSassのミックスインを共有したい

　チームで作業をしている場合、例えば「リセットは、このミックスインを使いましょう」といった形で、ミックスインなどの共有が行われるようになるだろう。その場合、Compassでは共有用のフォルダーを追加フォルダーとして指定することで、利用できるようになっている。

　それには、Compassの設定ファイルである「config.rb」をテキストエディターで開いて下記の設定を入力する。

additional_import_paths = ['｛パス1｝','｛パス2｝',……]

　｛パス1｝｛パス2｝……の部分は適宜書き換えてほしい。パスは複数設定できるようになっている。全体で共有しているものと、プロジェクトで共有しているものなど、必要に応じて設定を切り替えるといいだろう。

　なお前項の「【1】CompassをGUIアプリで利用したい」で紹介したCodekitなどでは、この設定をGUI上から行えるようになっている。

次回は、Emmet（旧、Zen-Coding）で爆捗！

　今回は、さまざまなCompassの使い方を紹介したが、いかがだっただろうか。その他設定についてはCompassの公式リファレンスを参考にしてほしい。

　さて、今回までの連載で、WordPressのテーマ作成を、Dreamweaverをメインに用いてSassやCompassと組み合わせながら爆発的にはかどらせる方法を解説してきた。次回は、これらに加えて「Emmet」（旧、Zen-Coding）を使って、WordPressのテーマ作成をさらに爆捗させる方法を解説する予定だ。

「爆捗！ WordPressテーマ作成ショートカット」バックナンバー

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto