Sass 3.2における考察

愚地独歩が家にやってきました。Kameです。

最近Sassが社内で熱くなってきているので今回はSassの話題。
アライさんよりSass 3.2が出たという噂を聞いたのでちょっと見てみました。
いろんなところで新機能まとめは出ているのでそちらを参照してもらうとして、
僕はそれに対する「こんな場面で使えるかな」といったちょっとした考察をしてみました。

IEハック用Mixin

今更そんなに需要もないかと思いますが、新機能の「@content」というものを見ていたら思いつきました。

前からネストしている中で「*html」とか「*:first-child+html」とかどうすればいいのかなーと思ってました。
これに関しては僕が知らなかっただけで以下のように書けば元々できたようです。(アライさんより)

// .scss
.hoge {
	* html & {
		margin: 0;
	}
}

// .css
* html .hoge {
  margin: 0;
}

これはこれでいいなと思ったんですが、逐一「*html」とか「*:first-child+html」と書かなければいけないのは面倒。
そこで@contentを使って以下のように作成してみました。

// .scss
@mixin hack( $version:null ){ // 初期値はnull
	@if ( $version == 6 ) or ( $version == null ){
		* html &{
			@content;
		}
	}
	@if ( $version == 7 ) or ( $version == null ){
		*:first-child+html &{
			@content;
		}
	}
}

.huge{
	@include hack(6){ // バージョン番号を指定
		&{ margin:0 10px; } // ハック用スタイル
	}
}

// .css
* html .huge {
  margin: 0 10px;
}

上記のようにmixin化することで、あれのハックどんな記述やったっけとGoogleを使う必要もなくなります。
さらに他のハックなんかも書いていけば引数の指定でいろんなのが反映できるんじゃないかと思います。

@contentは@includeを{}で囲った中身が反映されるようなので色んなプロパティが記述できます。
@mixinが更に便利に・・・!

ちなみに上記のmixinを書いていてこれまた初めて知ったのが、@ifの複数条件指定は
JavaScript等でお馴染みの「&&」や「||」ではなく「and」と「or」で書くようです。
他にも「not」というのも使えます。「!=」や「<=」というのはそのまま使えます。

nullが使えるようになった

nullデータタイプが使えるようになったらしく「ふーん」と思っていたのですが、詳しく見てみると結構便利そうでした。

私よくCSSスプライト用に下記のようなMixinを書きます。

@mixin sprite($width,$height,$left,$top){
	display:block;	
	width:$width;
	height:$height;
	background:url('sprite.png') no-repeat $left $top;
	white-space:nowrap;
	text-indent:100%;
	overflow:hidden;
}

幅、高さ、ポジションを指定するだけで画像を表示させる仕組みです。
しかしこれですとたまに幅と高さだけ他の場所でまとめて指定しちゃってて、ここでも書くとダブっちゃって無駄が多いというような時があります。
そういう場合にnullができたことで気にしなくてもよくなりました。
includeする際に

.huga{
	@include sprite(null,null,-10px,-10px);
}

と、$widthと$heightの部分をnullにしてやると吐き出されるCSSは

.huga {
  display: block;
  background: url("sprite.png") no-repeat -10px -10px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

というようにプロパティごとwidthとheightが消えています。
つまり、null値のプロパティはCSSには反映されません。

まとめ

  • 3.2になって更に痒いところに手が届くようになった。
  • 他にも%(プレースホルダ)なんかはclearfix等で大活躍するでしょう。
  • OOCSS by Sassに向けて邁進しましょう。

「Sass 3.2における考察」への1件のフィードバック

  1. ピンバック: SASSメモ1 | log

コメントは停止中です。