shirokuro331

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

shirokuro331

画像の幅と高さを取得する

background プロパティで背景画像を指定した時、width と height の値が欲しい時もある。
そういうときに、いちいち画像のサイズを調べるのは面倒なので、下記のようにする。

background: url("../image/common/hoge.png") no-repeat 0 0;
width: image-width("../image/common/hoge.png");
height: image-height("../image/common/pagetop.png");

image-width, image-height で、自動的に画像のサイズを取得してくれる。

shirokuro331

続・Sprite について

一つ前の Gist でSprite について触れたが、あれだけだと単に画像をひとまとめにして、それぞれのセレクタを作ってくれるだけ。

width や height の値も入るようにしよう。

@import "my-icons/*.png";
@include all-my-icons-sprites($dimensions:true);

上記のように ($dimentions:true) と付け足すだけで

shirokuro331

Sprite について

Sprite しよう。
アイコンとかボタンとかを Photoshop とかでひとつの画像にしなくても、Compass がやってくれる。
さらに background プロパティも自動で書いてくれる。

CSS Sprite Generator みたいなことを Comapss がやってくれるのでとても楽。

公式サイトの Spriting with Compass を見てみると、その手順が書いてある。

shirokuro331

Compass の書き方について

では実際にどのように使うのか。 公式サイトの Reference を見てみると

This file can be imported using: @import "compass"

と書いてある。

なので、sass/screen.scss に

shirokuro331

config.rb について

config.rb を編集しよう。
config.rb をエディタで開いてみると

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"

javascripts_dir = "javascripts"

shirokuro331

watch について

scss ファイルを編集したら自動でコンパイルしてくれる便利なやつ。

単体のファイルをコンパイルするだけなら

$ compass compile sass/screen.scss

で、css フォルダへコンパイルした screen.css ができあがる。
でもいちいちそんな面倒なことはしたくないし、たぶん誰もしないと思う。
scss ファイル編集したら自動でコンパイル（監視）してくれるコマンドは下記。

shirokuro331

俺、もう1回 compass と向き合ってみるんだ...！
だって sprite とか便利そうだから。

Compass

インストール

公式サイトの Install ページを見るとインストール手順が書いてある。

コマンドラインから compass 使うには Ruby もインストールする必要がある。 Mac は最初から Ruby が入ってるので、インストールする必要ない。

shirokuro331

#なんだかんだ

##えーと1 どういうこういう そういうどういう

##えーと2 どういうこういう そういうどういう

shirokuro331

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
floatBox("#fixedArea", 1);
	function floatBox(ele, flag) {
		var box = $(ele);
		var fixed_box_offset = box.offset();
		var box_size = {"width": box.width(), "height":  box.height()};
		var footer_box_offset = $("#footer").offset();
		$(window).scroll(function() {