【罪と罰 その4】オレとサス　その2

ネタが無くなったKameです。

オレサス第2弾ということで、Sassの普及に向けて書いていきます。
普及とか上から目線で言ってますが、僕もあんまり難しいことはできません。

Sassは常々CSS Spriteに強いなーと思っていたので、それ用のコードをちょっと書いてみました。
なんかこう順を追って作っていくみたいな方式でいきます。

mixin

mixinを使うとだいぶプログラムっぽいことになります。JavaScriptの関数みたいな使い方ですね。
CSS Spriteでいちいちbackgroundとかなんかその他もろもろを書くのが面倒だと思うので、それを背景画像の位置指定だけにしてしまいます。

@mixin sprite($left,$top){
	background:url('sprite.png') no-repeat $left +px $top +px;
}

#hoge{
	@include sprite(-100,-100);
}

#huga{
	@include sprite(-150,-150);
}

こいつをCSS化すると

#hoge {
  background: url("sprite.png") no-repeat -100px -100px;
}
#huga {
  background: url("sprite.png") no-repeat -150px -150px;
}

こうなります。
@mixinの中に書いたコードを@includeで引っ張り出してきます。
その際にinclude側の（）で書かれている部分のように文字列や数字を引数として渡して内部で処理させることも可能です。

for

プログラムの定番for文も使えると便利ですね。
例えば1月～12月までのタブがあったとして、12個分のボタンをスプライトを利用して作るパターンがあったとします。
idには連番が振られていて、さらにボタンが全部同じ横幅だったりとかっていう状況です。

@mixin sprite($left,$top){
	background:url('sprite.png') no-repeat $left +px $top +px;
}

@for $i from 0 to 12 {
	$num:$i + 1;
	@if $num < 10 {
		$num:'0' + $num;
	}
	#month#{$num} a{
		@include sprite(-(50 * $i),0);
	}
}

こんな風にさっき作ったmixinと組み合わせれば、

#month01 a {
  background: url("sprite.png") no-repeat 0px 0px;
}

#month02 a {
  background: url("sprite.png") no-repeat -50px 0px;
}

#month03 a {
  background: url("sprite.png") no-repeat -100px 0px;
}

#month04 a {
  background: url("sprite.png") no-repeat -150px 0px;
}

#month05 a {
  background: url("sprite.png") no-repeat -200px 0px;
}

#month06 a {
  background: url("sprite.png") no-repeat -250px 0px;
}

#month07 a {
  background: url("sprite.png") no-repeat -300px 0px;
}

#month08 a {
  background: url("sprite.png") no-repeat -350px 0px;
}

#month09 a {
  background: url("sprite.png") no-repeat -400px 0px;
}

#month10 a {
  background: url("sprite.png") no-repeat -450px 0px;
}

#month11 a {
  background: url("sprite.png") no-repeat -500px 0px;
}

#month12 a {
  background: url("sprite.png") no-repeat -550px 0px;
}

ちゃんと連番のIDを出力し、一定量ずつ背景画像を横にずらすというコードが簡単に書けます。

さらっとif文を使って10以下のIDは0埋めしてたりもします。

each

eachはforと同じくループ処理を行うものですが数値で回すのではなく、指定したリスト（配列？）をリスト分だけ繰り返します。
グローバルナビゲーションなんかでIDをきっちりつけたボタンにしたい時に使えます。

@mixin sprite($left,$top){
	background:url('sprite.png') no-repeat $left +px $top +px;
}

@mixin gnav($left){
	@include sprite(-$left,0);
	&:hover{
		background-position:-$left -60px;
	}
}

$name:hogehoge,hugahuga,pomepome;
$left:200;
@each $id in $name {
	##{$id} a{
		@include gnav($left);
	}
	$left: $left + 200 ;
}

CSS化すると

#hogehoge a {
  background: url("sprite.png") no-repeat -200px 0px;
}
#hogehoge a:hover {
  background-position: -200 -60px;
}

#hugahuga a {
  background: url("sprite.png") no-repeat -400px 0px;
}
#hugahuga a:hover {
  background-position: -400 -60px;
}

#pomepome a {
  background: url("sprite.png") no-repeat -600px 0px;
}
#pomepome a:hover {
  background-position: -600 -60px;
}

となります。

$name変数にID名を取り出す順番通りに記述しておけば、その分をループさせてナビゲーションを楽に作ることができます。
さらにmixin同士を組み合わせれば、hover時の処理なども追加できます。

シメ！

CSSでは他のプログラムとは違って、今まで同じ記述を何回も何回も書いて来ました。
でもやっぱり手間なので、できるだけこうやって楽に書いていきたいですね。