• sass

    Compassを使う!(独自機能)

    2012/07/09

    便利なCompassの独自機能の紹介。

    compass.png

     

    これらの機能は、config.rbが正しく設定されていることが前提になります。

    Compass設定ファイル(config.rb)

     


    画像サイズの取得

    image-width,imge-height("画像のパス")で、画像のサイズを取得することができます。

    
    .hoge {
      width: image-width("gazou.png");
      height: image-height("gazou.png");
    }
    
    

    画像のData URIへの変換

    inline-image("画像のパス")で、DataURI形式に変換して取得することができます。

    
    .hoge {
      background-image: url(inline-image("gazou.png"));
    }
    
    

    CSS Sprite

    複数の画像をひとつにまとめたspriteも、Compassは自動で作ってくれます。
    さらにサイズ、位置も自動で出力してくれるんです。これはすごい!

    ※Compassでsprite化できるのはpng形式のみで、jpg,gifはできません。


    ・画像の格納

    例えば、ナビゲーション画像のspriteを作るとして…sprite化したい各画像をimgフォルダの中のnavフォルダにいれます。

    
    img/nav/top.png
    img/nav/menu.png
    img/nav/contact.png
    
    

    ・scssファイルで指定
    scssファイルにこの2行を記述します。

    
    @import "nav/*.png";
    @include all-nav-sprites;
    
    

    まず、@import "nav/*.png";によって、navフォルダに入っている全てのpng画像が1枚に結合され、出力されます。
    つぎに@include all-nav-sprites;によって各画像の位置(background-position)が出力されます。

    ※@include all-xxx-sprites; ←xxxの部分は画像を格納したフォルダ名を記述します。


    出力されるcssはこれ。

    
    .nav-sprite,
    .nav-top,
    .nav-menu,
    .nav-contact{ background: url('../img/nav-hogehoge.png') no-repeat; }
    
    .nav-top{
      background-position: 0 0;
      }
    …
    
    

    フォルダ名-ファイル名というクラス名がつけられて出力されています。
    それに合わせてHTMLのクラス名を指定する、もしくは表示したいセレクタで@extendすればOK!
    もうあの画像作成や位置をはかったりする必要も、画像サイズや位置を記述する必要もないんですね!素敵!


    CSS Sprite(応用)

    上記で書いた通り、出力されるクラス名は「フォルダ名-ファイル名」ですが、
    このクラス名を任意のものに指定することができます。
    @include all-nav-sprites;を@include ディレクトリ名-sprite(ファイル名)に変えます。

    
    @import "nav/*.png"
    
    .nav01{
      @include nav-sprite(top);
    }
    .nav02{
      @include nav-sprite(menu);
    }
    .nav03{
      @include nav-sprite(contact);
    }
    
    

    このように記述することで、出力されるcssは以下になります。

    
    .nav-sprite,
    .nav01,
    .nav02,
    .nav03{ background: url('../img/nav-hogehoge.png') no-repeat; }
    
    .nav01{
    background-position: 0 0;
    }
    …
    
    

    これで任意のクラス名に任意の画像を指定することができました!

    タグ:Compass , Sass

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back