Sass 3.4 rc1の新機能を見てみた

今朝TwitterのTLを見ていると、Sass 3.4に関する話題が目に入りました。Githubを見てみると、2014年7月12日にmasterブランチがBump VERSION to 3.4.0.rc.1されています。

doc-src/SASS_CHANGELOG.mdを見ると詳細が書かれていましたので、少し確認してみました。また、Sass Bites #44 - Sass 3.4 Preview という動画もありましたので、これも視聴してみました。

SassScriptで`&`が利用可能に

Sass 3.3までは、&はセレクタ内でのみ利用可能でしたが、Sass 3.4ではSassScriptでも利用可能になったようです。

Sass Changelogにあるように$selectorに&を代入し、inspect($selector)とすると、.foo.bar .baz.bang, .bip.quxという値になっていることが確認できます。

.foo.bar .baz.bang, .bip.qux {
	$selector: &;
	debug: inspect($selector);
}

これを利用すると、下記のようなSCSSが記述できるようになります。

.list-products{
	overflow: hidden;
	margin-right: -30px;
	li{
		$selector: &;
		position: relative;
		display: inline-block;
		margin: 0 30px 60px 0;
		width: 335px;
		vertical-align: top;
		&:nth-child(2n+1):nth-last-child(-n+2),
		&:nth-child(2n+1):nth-last-child(-n+2) ~ #{nth(nth($selector, 1),2)}{
			// 最後の行は下方向のmarginを0にする
			margin-bottom: 0;
		}
	}
}

出力は以下の通りです（SCSSの11行目〜15行目の変換結果）。

.list-products li:nth-child(2n+1):nth-last-child(-n+2), .list-products li:nth-child(2n+1):nth-last-child(-n+2) ~ li {
	margin-bottom: 0;
}

今までは&:nth-child(2n+1):nth-last-child(-n+2) ~ liと書かなければならず、少しもやもやしていましたが、これで解決できます。

セレクタ関連の関数に新たな関数が追加される

SassScriptで&を使う際、&の力を補う関数がいくつか追加されたようです。気になったのはselector-append($selectors...)とselector-replace($selector, $original, $replacement)でしょうか。イマイチよいサンプルが思いつかないのですが、試してみました。

`selector-append($selectors...)`

$selectors...の内容をスペース無しでつないでいきます。.nav-container > .navみないなHTMLをスタイリングする際に下記のような書き方ができるかなと。今だったら.nav > .innerとか書くと思いますが...。BEMを利用する際何か役立つのかな？？

.nav{
	@at-root #{selector-append(&, "-container")}{
		margin-bottom: 30px;
		border-width: 1px 0;
		border-style: solid;
		border-color: #ccc;
	}
	margin: 0 auto;
 	width: 960px;
}

CSSは下記のように出力されます。

.nav {
	margin: 0 auto;
	width: 960px;
}
.nav-container {
	margin-bottom: 30px;
	border-width: 1px 0;
	border-style: solid;
	border-color: #ccc;
}

`selector-replace($selector, $original, $replacement)`

$selectorの内容を置換する事ができます。例えば、下記のようなコードが書けます。

.nav{
	a{
		.en{
			color: #fff;
			@at-root #{selector-replace(&, "a", "a:hover")}{
				color: #fc0;
			}
		}
	}
}

CSSは下記のように出力されます。

.nav a .en {
	color: #fff;
}
.nav a:hover .en {
	color: #fc0;
}

`@error`ディレクティブがサポートされる

mixinを定義してチームで利用する際に役立つかもしれません。

例えば、SASS_REFERENCE.mdにある下記のようなmixinを定義します。

@mixin adjust-location($x, $y) {
	@if unitless($x) {
		@error "$x may not be unitless, was #{$x}.";
	}
	@if unitless($y) {
		@error "$y may not be unitless, was #{$y}.";
	}
	position: relative; left: $x; top: $y;
}

.foo内でmixinを呼び出す際、第1引数で単位を付け忘れたとします。

.foo{
	@include adjust-location(100, 10px);
}

すると下記のようなエラーが出力されます。

$x may not be unitless, was 100.

その他

小さな改良や、下位互換性のない変更も多数行われているようです。詳しくは、Sass Changelogをどうぞ。

Sass 3.4をすぐに試してみたい

SassMeisterがSass v3.4.0.rc.1にも対応しているので、気軽に試す事ができます（コントロールパネルでコンパイラのバージョンを変更してください）。僕が先程書いたサンプルを書き換える事も可能なので、試してみてください。

2014年7月16日追記

続編「Sass 3.4のselector-replace()とselector-nest()を利用したmixinの例」を書きました。

SassScriptで&が利用可能に