ScssでCSSスプライトを作成

css scss sass

まずは即席のメニューバーを作成。


HTML

<nav>
	<ul>
          <li><a href="#" class="Menu01"><span>Menu01</span></a></li>
          <li><a href="#" class="Menu02"><span>Menu02</span></a></li>
          <li><a href="#" class="Menu03"><span>Menu03</span></a></li>
          <li><a href="#" class="Menu04"><span>Menu04</span></a></li>
          <li><a href="#" class="Menu05"><span>Menu05</span></a></li>
	</ul>
</nav>



Scss

nav{
margin: 0 0 50px;

 ul{
	 overflow: hidden;
	 margin: 0;
	 padding: 0;
	 
	 li{
		 list-style: none;
		 float: left;
		 width: 160px;
		 height: 50px;
		 a{
			display: block;
			padding: 10px 0;
			line-height: 100%;
			text-align: center;
			overflow: hidden;
			background: black;
			color: #FFF;
			}
			&:hover{opacity: 0.2;
                   -ms-filter: "alpha(opacity = 20)";
				   }
		 }
	 }
}



これを参考に@for文などを使って楽にCSSスプライトを作ってみる。
スプライトの画像はリンクバーが１つにつき160x36px。
これが5枚並びlinkとhoverとacitveで3段階の変化が必要なので
スプライト画像全体は800x108px。


これを@forを駆使して簡単に記述できるようにします。


scss

/* CSS_sprite 移動 変数 */
$pos_x: 160px;
/* ---------  */

nav{
margin: 0 0 50px;

 ul{
	 overflow: hidden;
	 margin: 0;
	 padding: 0;
	 
	 li{
		 list-style: none;
		 float: left;
		 width: abs($pos_x);
		 
			a{
				display: block;
				padding: 10px 0;
				line-height: 100%;
				text-align: center;
				overflow: hidden;
	            
				/* -リンクタイトルを非表示--  */
				    span{
						visibility: hidden;
						}

					/* -メニューが5つあるので5回繰り返し-  */	
					@for $i from 1 through 5{
						&.Menu0#{$i}{
							
　　　　　　　　　　　　　　　　　　　　　　　　　　　　/* -画像左上が起点としてそこから何ピクセルずれるかを指定。-  */
							background: url(../img/menu_bar.jpg) no-repeat $pos_x - ($i  *  $pos_x) top;
							
								&:hover{
								background: url(../img/menu_bar.jpg) no-repeat $pos_x - ($i  *  $pos_x)  -36px;
								}
	                           
							   &:active{
								background: url(../img/menu_bar.jpg) no-repeat $pos_x - ($i  *  $pos_x)  -72px;
								}

						}
					}
			}
			
		 }
	 }
}


css(コンパイル後)

nav {
  margin: 0 0 50px;
}
nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
  float: left;
  width: 160px;
}
nav ul li a {
  display: block;
  padding: 10px 0;
  line-height: 100%;
  text-align: center;
  overflow: hidden;
}
nav ul li a span {
  visibility: hidden;
}
nav ul li a.Menu01 {
  background: url(../img/menu_bar.jpg) no-repeat 0px top;
}
nav ul li a.Menu01:hover {
  background: url(../img/menu_bar.jpg) no-repeat 0px -36px;
}
nav ul li a.Menu01:active {
  background: url(../img/menu_bar.jpg) no-repeat 0px -72px;
}
nav ul li a.Menu02 {
  background: url(../img/menu_bar.jpg) no-repeat -160px top;
}
nav ul li a.Menu02:hover {
  background: url(../img/menu_bar.jpg) no-repeat -160px -36px;
}
nav ul li a.Menu02:active {
  background: url(../img/menu_bar.jpg) no-repeat -160px -72px;
}
nav ul li a.Menu03 {
  background: url(../img/menu_bar.jpg) no-repeat -320px top;
}
nav ul li a.Menu03:hover {
  background: url(../img/menu_bar.jpg) no-repeat -320px -36px;
}
nav ul li a.Menu03:active {
  background: url(../img/menu_bar.jpg) no-repeat -320px -72px;
}
nav ul li a.Menu04 {
  background: url(../img/menu_bar.jpg) no-repeat -480px top;
}
nav ul li a.Menu04:hover {
  background: url(../img/menu_bar.jpg) no-repeat -480px -36px;
}
nav ul li a.Menu04:active {
  background: url(../img/menu_bar.jpg) no-repeat -480px -72px;
}
nav ul li a.Menu05 {
  background: url(../img/menu_bar.jpg) no-repeat -640px top;
}
nav ul li a.Menu05:hover {
  background: url(../img/menu_bar.jpg) no-repeat -640px -36px;
}
nav ul li a.Menu05:active {
  background: url(../img/menu_bar.jpg) no-repeat -640px -72px;
}

このように、CSSで位置から記述すると面倒なCSSスプライトもSassから書けば
短いコードですむのでとても便利。


今回は<a>のクラス名にナンバリングを添えて付与しましたが、従来ですと
リンク先のコンテンツタイトルをクラス名としてつけるパターンが多いので、その場合は

$linkTitle: Home,Shop,about,Contact,Access;

上記のように変数に各コンテンツタイトルをリスト化しておきます。
そして

@for $i from 1 through 5{
&.Menu0#{$i}{
~略~
}
}

の&.Menu0#{$i}のセレクタ名の部分を
&.#{nth($linkTitle,$i)}に差し替えるという手段で自動的に個々のクラス名に割り当てることが出来ます。


ちなみに差し替え文の"nth"とはnth()関数の事で
nth(第1引数、第2引数)から成り、
第1引数はリストが入った変数、第2引数から第1引数の中のn番目の値を返すという関数です。