Sass 3.4のselector-replace()とselector-nest()を利用したmixinの例

公開

昨日の記事「Sass 3.4 rc1の新機能を見てみた」を書く際に視聴した動画「Sass Bites #44 - Sass 3.4 Preview」の続編、「Sass Bites #45 - Sass 3.4 and selector-replace( )」が予定通り公開されていたので視聴してみました。

この動画を見ると、selector-replace()とselector-nest()の使い方がよく理解できると思います。例えば、昨日紹介しなかったselector-nest()の場合、selector-nest(".foo", ".bar", ".baz")とすると.foo .bar .bazというセレクタが返されます。

動画で紹介されたmixinをベースに、自分なりに改良したmixinを作ってみました。

@mixin insert-context($target, $add-contexts...) {
	$new-contexts: ();
	$new-selector: ();

	// 新しいコンテキストを追加する
	@each $context in $add-contexts {
		$new-contexts: append($new-contexts, selector-nest($target, $context), comma);
	}

	// "&"内のコンテキストを変更する
	@each $context in $new-contexts {
		$new-selector: append($new-selector, selector-replace(&, $target, $context), comma);
	}
	
	// 出力
	@at-root #{$new-selector}{
		@content;
	}
}

.nav{
	a{
		background-color: #000;
		&:hover,
		&.active{
			background-color: #eee;
		}
	}
	.en{
		color: #fff;
		@include insert-context(".nav", "a:hover", "a.active"){
			color: #333;
		}
	}
}

出力されるCSSは下記の通りです。

.nav a {
	background-color: #000;
}
.nav a:hover, .nav a.active {
	background-color: #eee;
}
.nav .en {
	color: #fff;
}
.nav a:hover .en, .nav a.active .en {
	color: #333;
}

selector-nest()を利用すると、.navと.enの間にa:hover・a.activeをそれぞれ挿入し、セレクタをカンマ区切りでまとめて出力することができました。ただ、まだ改良の余地はあるのかもしれません...。動画は毎週公開されるようなので、引き続きチェックするなどしたいと思います。