CodeZine(コードジン)

特集ページ一覧

Compassの実践と、オイシックスでの導入事例

SassとCompassをつかってCSSを効率作成しよう(4)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの一つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。第4回目はCompassの実践部分とオイシックスでの導入事例を解説します。

目次

対象読者

  • CSSの基礎知識がある方
  • SassおよびCompassの導入を検討している方

Compassの主な機能

 初めにCompassの機能を紹介します。CompassにはSassを効率よく記載するために、以下の機能が用意されています。

独自のmixin

 CSSを部品のように扱えるのがmixin(ミックスイン)です。Compassには多彩なmixinが用意されています。使い方はSassと同様で「@include mixin名」と記載することで利用できます。後述する今回のサンプルでは、CSSのbackground-clipをmixinを使用して記載する方法を紹介します。

独自の関数

 Compassには独自の関数が用意されています。「関数名(引数);」と記載して実行させます。後述するサンプルでは、splite-urlやsplite-positionといったCSSスプライトの作成で利用する関数を紹介します。

CSSスプライト

 Compassを利用することでCSSスプライト画像とそのポジションが記載されたCSSが簡単に作成できます。

 具体例として、pngファイル群からCSSスプライト画像を抽出する過程を紹介します。初めに、「Compassプロジェクト/config.rb」内に記載してある「images_dir」のフォルダ内にpng画像を配置します。

デフォルトのconfig.rb(「compass create」とコマンドを実行して
Compassプロジェクトを作成した際に作られる設定ファイル)
require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"  ←ここの中にpngファイルを配置します
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
配置したpngファイル
配置したpngファイル

 次にSassファイルの作成です。基本的な流れとして、sprite-map関数を利用してCSSスプライトにしたい画像を設定し、sprite-url関数やsprite-position関数を利用してCSSスプライト画像のパスや、表示したい画像の位置を表示します。今回はsprite-testという独自のmixinを作成して、CSSスプライト画像からmail-magazine.pngの位置を表示させます。

Sassファイル
@charset "utf-8";
//background-clip(Compass独自のmixin)を利用するために記載します
@import "compass/css3.scss";
$device-pixel-ratio : 2; //スマートフォン用デバイスピクセル比  Retinaディスプレイは2を設定

//sprite-mapはCompass独自の関数です
//今回はsprite-map関数("画像の配置したパス", レイアウトパターン※)を利用してCSSスプライト画像を作成します
//※レイアウトパターンについてはhttp://compass-style.org/help/tutorials/spriting/sprite-layouts/を参照
$spritemap: sprite-map("smart/base/images/sprite/*.png",$layout: smart);

@mixin sprite-test($image){
  //sprite-url関数はCSSスプライト画像のURLを返します
  background-image : sprite-url($spritemap);
  //sprite-file関数で元ファイル画像のパスを返します
  $image-path : sprite-file($spritemap, $image);
  //sprite-position関数で元画像の位置を取得します x値、y値が取得できます
  $image-position : sprite-position($spritemap, $image);
  //image-height関数で元画像の縦幅を取得します
  height : image-height($image-path) / $device-pixel-ratio;
  //image-width関数で元画像の横幅を取得します
  width : image-width($image-path) / $device-pixel-ratio;
  //sprite-position取得した画像位置のx値を取得します
  $pos_x : round(nth($image-position, 1) / $device-pixel-ratio);
  //sprite-position取得した画像位置のy値を取得します
  $pos_y : round(nth($image-position, 2) / $device-pixel-ratio);
  background-position : $pos_x $pos_y;
  //background-clipはCompass独自のmixinです
  //ベンダープレフィックスを付与して引数にしていされたbackgrund-clipを記載します
  @include background-clip(padding-box);
}

.nav{
  .mail-icon{
      //mail-magazine.pngを表示する
    @include sprite-test("mail-magazine");
  }
}

 Sassファイルの用意ができたら、Compassプロジェクト上で「compass watch」とコマンドを入力して監視を開始します。その後、作成したSassファイルをconfig.rbに記載したsass_dir下に配置すればCSSファイルが出力されるはずです。

出力されたCSSファイル
.nav .mail-icon {
  background-image: url('../../../smart/base/images/sprite-s570f9b11e3.png');
  height: 11px;
  width: 11px;
  background-position: -11px -11px;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
生成されたCSSスプライト画像
生成されたCSSスプライト画像

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 鈴木 健二(オイシックス株式会社)(スズキ ケンジ)

    オイシックスにてスマホ開発担当。映像製作、DTPなどのデザイナー経験があり、フロントエンドからサーバサイドまで幅広く開発を行っている。現在仙台在住で、毎週東京のオイシックス本社まで通っている。得意分野はJavaScript、CSS。

バックナンバー

連載:SassとCompassをつかってCSSを効率作成しよう
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5