• sass

    Compassで画像変換

    2012/08/20

    便利に楽々画像を変換したcssの返し方。

    compass.png

    スマホサイトを制作で画像を使う場合、下記のようにしたいことがあります。

    画像を1/2サイズで表示したい

     ⇒画像そのままのサイズで表示すると、高解像度端末でぼんやり表示されてしまう為。

    画像をdataURI(base64)に変換したい

     ⇒画像をbase64変換し、HTMLやCSSに直接埋め込むことにより画像取得のHTTPリクエストを減らすことができる為。

     

    これって、

    画像サイズを2で割って・・・(あっ割り切れないな。。四捨五入・・)

    割ったサイズをcssで記述・・・(あれ、サイズなんだったっけ・・)

    ツールで画像をbase64化・・・(ちょっと面倒・・)

    変換されたコードをコピペ・・・(んー。。コード長いな・・)

    っていう作業が必要になるんですが。 ※()内は私の心の声

     

    Compassを使うことで、これらのことが簡単にできてしまうんです!

     

    <やり方>

    ①画像サイズを自動で取得する。(image-width / image-height)

    (参考:【Sass】Compassを使う!(独自機能)

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

     

    ②画像をdataURI(base64)に変換する(inline-image)

    
    background: inline-image("gazou.png") no-repeat;
    
    

     

    ③演算、関数を使って画像サイズの1/2を指定する。

    
    $img_width: image-width("chara.png");
    width: round($img_width/2);
    
    

    roundというのは四捨五入を行う関数です。

    なので、↑は画像widthを取得 ⇒2で割って四捨五入した結果がwidthに指定されることになります。

     

    この3つを使えば、やりたいことが全部できますね!

    でも、毎回これを全部記述するのも面倒。

    そこで、これを便利に使いまわす為、@mixinで定義しておきます。

     

    <やりたい事>元画像の1/2サイズをdata64化して、背景画像に指定する!

    
    @mixin halfImg($img){
      display: inline-block;
      $img_width: round(image-width($img)/2);
      $img_height: round(image-height($img)/2);
      width: $img_width;
      height: $img_height;
      background: inline-image($img) no-repeat 0 0;
      -webkit-background-size: $img_width auto;
    }
    
    

     

    一気に書くとあわわわ!となりがちですが(私が)、上から説明していきます。

    仮に@mixin名はhalfImgにしました。

    表示形式を画像サイズにしたいので、display: inline-block。

    その下2行で、変数$img_widthと$img_heightに「画像サイズを取得して、2で割って、四捨五入して!」と宣言しておきます。

    その下2行で、「その結果をwidth heightに指定してね!」と。

    そして、inline-imageを使って画像をbase64化。

    background-size(CSS3)を使用して、横幅は上の結果($img_width) 、縦幅はautoにして、背景画像サイズを自動調整します。

     

    この@mixinを呼び出し。

    
    hoge{
      @include halfImg("gazou.png");
    }
    
    

     

    使うときはたったこれだけの記述で面倒なあの作業が完了してしまうんです!!

    ごいすーー!!!

    先にCompass設定ファイルでimageフォルダの指定を忘れずに!(参考:【Sass】Compass設定ファイル(config.rb)

    タグ:Compass , Sass

この記事へのコメント

コメントを送る

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

back