Sass3.4 変更点・追加点を眺めてみた

時間ができたので、sass changelog眺めて、あまり実例が思い浮かばないのもあるけど、一通り試してみたときの備忘録。

parent selector(&) に関して

unquoteなリストを返却するようになった

3.3 ではエラーになっていたけど、

bemっぽことを意識して、以下のようにもできる。

該当の親セレクタがない場合 nullを返すようにもなった

3.3ではエラーでしたが、可能になった。

追加されたselector function

selector-nest($selectors…)

そのまんまselectorをネストさせる

selector-append($selectors…)

$selecorsのリスト順に追加していく

また単純に順番に追加するだけなので、いかのようにもなる

selector-extend($selectors, $extendee, $extender)

$selectorsはselectorリスト、
$extendeeはextendされるselector、
$extenderはextendするselector

.showを継承もととして、.edit .content-areaが追加されたセレクターが返却されるっぽい。

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

これはそのまま、selectorの$originalを$replacementに置換

selector-unify($selector1, $selector2)

二つのセレクターの組み合わせたセレクターを返す。
selctor1とselector2からできる組み合わせをすべて返すので例えば

全パターンを返してくれる。パターン生成が楽になりそう。

is-superselector($super, $sub)

$super が $sub の親要素かどうかを返してくれる

という具合にできるっぽい。これまでより柔軟に分岐できそう。

selector-parse($selector)

string型の変数から簡単にcssを生成できる。

という感じ。実用例としていい感じのものが浮かばなかった。
qiitaに投稿した。

Comments