Help us understand the problem. What is going on with this article?

SCSSに更にCompassを入れる準備

More than 5 years have passed since last update.

Compassを導入したいと思ってその準備で調査。
公式のドキュメント見ればいいんだけどやっぱり手を動かしておいた方がいいので。

index.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheets/sandbox.css">
<body>
  <div>
    <p>Compass!</p>
    <ul>
      <li class="icons-brick">on compilcation error</li>
      <li class="icons-brick_link">custome class name for sprites</li>
      <li class="musi">bug</li>
    </ul>
  </div>
</body>

スプライトユーティリティの使い方

$ ls images/icons/

brick.png                find.png              ruby.png
brick_link.png           macFFBgHack.png       tag_green.png
bug.png                  package.png           wrench.png
bullet_black.png         page_green.png        wrench_orange.png
bullet_toggle_minus.png  page_white_text.png   zoom.png
bullet_toggle_plus.png   page_white_width.png
date.png                 plugin.png
sass/sandbox.scss
@import "compass";
@import "icons/*.png";
@include all-icons-sprites;
  1. @import "icons/*.png;"でicons/*.pngを全部繋げたスプライト画像が作られる。
  2. @include all-icons-sprites;をすると、自動でclassと画像とが対応付けられる。
    • <li class="icons-brick">に対してはimages/icons/brick.pngが割り当てられる。
    • all-icons-spritesのiconsはディレクトリー名

クラス名をカスタマイズする

sass/sandbox.scss
.musi {
  @include icons-sprite(bug);
}

と、@include ****-sprite(クラス名)とすると、ディレクトリー名プリフィクス(icons-)無しで、任意のclass名(musi)が使える。
bugはimages/bug.pngのbug

複数形に注意

sass/sandbox.scss
.musi {
  @include icons-sprites(bug);
}

とspriteを複数形にしてしまうと

stylesheets/sandbox.css
.musi .icons-bug {
  background-position: 0 -16px;
}

と、セレクター二つの組み合わせになってしまうので注意。

画像ファイルを弄っても更新されない

画像ファイルだけを編集したり追加したりしても、スプライトは再作成されない。
何らかのSCSSファイルを弄ったりtouchコマンドで触る必要があるので注意。

コンパイルエラー時のフック(通知など)

http://qiita.com/items/96953b4b767753162875
に書いたように、compass watchしている間にコンパイルエラーがあったらIRCなどに通知したい。
config.rbを使う。

config.rb
on_stylesheet_error do |filename, message|
  $stderr.puts 'ERROR OCCURED!!!'
  # or notify via IRC and so on
  $stderr.puts "#{filename}: #{message}"
end

これでCompass導入もできるようになったと思う。
ちゃんと使い方説明できればね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away