shirokuro331

Emmet の書き方メモ

h2{menu}+ul>li*10>a[href="#"]{menu$}

上記をCtrl + E で展開すると

<h2>menu</h2>
<ul>
  <li><a href="#">menu1</a></li>

menu2

shirokuro331

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

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() {