#なんだかんだ
##えーと1 どういうこういう そういうどういう
##えーと2 どういうこういう そういうどういう
<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() { |
#なんだかんだ
##えーと1 どういうこういう そういうどういう
##えーと2 どういうこういう そういうどういう
では実際にどのように使うのか。 公式サイトの Reference を見てみると
This file can be imported using: @import "compass"
と書いてある。
なので、sass/screen.scss に
Sprite しよう。
アイコンとかボタンとかを Photoshop とかでひとつの画像にしなくても、Compass がやってくれる。
さらに background プロパティも自動で書いてくれる。
CSS Sprite Generator みたいなことを Comapss がやってくれるのでとても楽。
公式サイトの Spriting with Compass を見てみると、その手順が書いてある。
一つ前の Gist でSprite について触れたが、あれだけだと単に画像をひとまとめにして、それぞれのセレクタを作ってくれるだけ。
width や height の値も入るようにしよう。
@import "my-icons/*.png";
@include all-my-icons-sprites($dimensions:true);
上記のように ($dimentions:true) と付け足すだけで
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 で、自動的に画像のサイズを取得してくれる。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> |