前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。

最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。

新しく追加された関数

• 文字列用の関数
• リスト用の関数
• call()
• unique-id()
• 変数、ミックスイン、関数の存在を調べる関数
• inspect()

変更点

• リスト関連
• @each
• if()
• @extend
• !globalフラグ

※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。

文字列用の関数

新たに追加された文字列用の関数は6つあります。

• str-length($string)
• str-insert($string, $insert, $index)
• str-index($string, $substring)
• str-slice($string, $start-at, [$end-at])
• to-upper-case($string)
• to-lower-case($string)

str-length()

str-length()は、文字列の長さを取得する関数です。

// 引数には文字列を指定
str-length($string)

次のように使います。

str-length("foo")  //-> 3
str-length("")     //-> 0
str-length(" ")    //-> 1

str-length("漢字")     //-> 2
str-length("ひらがな") //-> 4

str-insert()

str-insert()は、文字列の中の指定した位置に別の文字列を挿入する関数です。

// 引数の1つ目に対象となる文字列、
// 2つ目に挿入する文字列、3つ目に挿入する位置を指定
str-insert($string, $insert, $index)

次のように使います。

str-insert("abcd", "X", 1)
      //-> "Xabcd"
      //   第3引数を0にしても結果は同じ

str-insert("abcd", "X", 4)
      //-> "abcXd"

str-insert("abcd", "X", 5)
      //-> "abcdX"

第3引数には負の値を指定することができます。その場合、文字列の末尾からの位置になります。

str-insert("abcd", "X", -1)
      //-> "abcdX"

str-insert("abcd", "X", -3)
      //-> "abXcd"

また、第3引数に文字数を超える値を指定した場合は次のようになります。

str-insert("abcd", "X", 10)
      //-> "abcdX"

str-insert("abcd", "X", -10)
      //-> "Xabcd"

str-index()

str-index()は、文字列の中に指定された文字列が含まれているかどうかを調べる関数です。含まれている場合は開始位置を、含まれていない場合は0を返します。

// 引数の1つ目に文字列、2つ目に調べたい文字列を指定
str-index($string, $substring)

次のように使います。

str-index(abcd, b)   //-> 2
str-index(abcd, bc)  //-> 2
str-index(abcd, X)   //-> 0
str-index(abcd, ad)  //-> 0

大文字小文字は区別されます。

str-index(abcd, c)  //-> 3
str-index(abcd, C)  //-> 0

str-slice()

str-slice()は、文字列から指定した範囲を取り出す関数です。

// 引数の1つ目に対象となる文字列、
// 2つ目に取り出す開始位置、3つ目に終了位置を指定
// 3つ目を省略すると文字列の末尾までになる
str-slice($string, $start-at, [$end-at])

次のように使います。

// 2文字目から末尾まで
str-slice("abcd", 2)
     //-> "bcd"

// 2文字目から3文字目まで
str-slice("abcd", 2, 3)
     //-> "bc"

// 0を指定した場合、1とみなされる
str-slice("abcd", 0, 3)
     //-> "abc"

第2、3引数には負の値を指定することもできます。負の値を指定した場合、末尾からの位置になります。

// （末尾から）3文字目から2文字目まで
str-slice("abcd", -3, -2)
     //-> "bc"

// 2文字目から末尾から2文字目まで
str-slice("abcd", 2, -2)
     //-> "bc"

第2引数より第3引数の値が小さい場合や同じ値の場合は「””」が返されます。 また、第2、第3引数が同じ位置を示す場合は、第2引数の位置の文字が返されます。

// 第3引数の値の方が小さい
str-slice("abcd", 2, 1)    //-> ""
str-slice("abcd", -3, -4)  //-> ""

// 引数の値が同じ
str-slice("abcd", 2, 2)    //-> ""

// 引数の値が同じ位置を示す
str-slice("abcd", 2, -3)   //-> "b"

to-upper-case()、to-lower-case()

to-upper-case()は文字列を大文字に、to-lower-case()は文字列を小文字にする関数です。

// 引数には文字列を指定
to-upper-case($string)
to-lower-case($string)

次のように使います。

to-upper-case(abcd)  //-> ABCD
to-upper-case(abCD)  //-> ABCD

to-lower-case(ABCD)  //-> abcd
to-lower-case(ABcd)  //-> abcd

リスト用の関数

新たに追加されたリスト用の関数は2つあります。

• list-separator($list)
• set-nth(($list, $n, $value)

list-separator()

list-separator()は、リストのセパレーターを返す関数です。

// 引数にはリストを指定
list-separator($list)

次のように使います。

list-separator(1px 2px 3px)      //-> space
list-separator((1px, 2px, 3px))  //-> comma

list-separator()の引数は1つなので、カンマ区切りのリストを上記のように直接指定する場合は、括弧（()）で囲む必要があるので注意してください。

リストの要素が2つよりも少なく、セパレーターもない場合はspaceを返します。

// 要素が2つよりも少ない
list-separator('foo')     //-> space

// セパレーターがある
list-separator(('foo',))  //-> comma

set-nth()

set-nth()は、n番目の要素を指定した値に置き換えた新しいリストを返す関数です。

// 引数の1つ目にリスト、2つ目に位置、3つ目に置換後の値
set-nth($list, $n, $value)

次のように使います。

$list: 10px 20px 30px 40px;

.sample {
    set-nth($list, 2, -20px);
        //-> 10px -20px 30px 40px

    set-nth($list, -2, -20px);
        //-> 10px 20px -20px 40px
}

call()

call()は、動的に関数を呼ぶことができる関数です。 呼べるのは、Sassに組み込まれている関数とユーザーが定義した関数とCSSの関数です。

// 引数の1つ目に呼びたい関数、2つ目にその関数に渡す引数
call($name, $args...)

次のコードは、2つの引数を足した値を返すというサンプル用の関数です。

@function sum($a: 0, $b: 0) {
    @return $a + $b;
}

通常では次のように利用します。

.sample {
    margin: sum(1px, 2px);  //-> 3px
}

call()を使うと、次のようにしてsum()を利用することができます。

.sample{
    margin: call(sum, 1px, 2px);  //-> 3px

    // call()の引数に変数を使う
    $fn-name: sum;
    padding: call($fn-name, 1px, 2px);  //->3px
}

また、キーワード引数を指定した場合、それはそのまま第1引数で指定した関数に渡されるため、次のようにすることもできます。

.sample {
    margin: call(sum, $b: 2px);  //-> 2px
}

call()の使い方次第では、より汎用性をもったミックスインや関数をつくることができそうです。

unique-id()

一度にコンパイルされたファイル内でユニークな、「u」から始まる9桁の文字列を返す関数です。文字列はコンパイルするたびに変わります。

.sample {
    content: unique-id();  //-> ucxkgyjv0
    content: unique-id();  //-> ucxkgyjva
    content: unique-id();  //-> ucxkgyjvc
    content: unique-id();  //-> ucxkgyjvg
}

変数、ミックスイン、関数の存在を調べる関数

• variable-exists($name)
• global-variable-exists($name)
• function-exists($name)
• mixin-exists($name)

variable-exists()

variable-exists()は、現在のスコープとグローバルスコープに指定された変数があるかどうかを調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

// 引数には変数名（$は不要）を指定
variable-exists($name)

次のように使います。

$g-foo: "global foo";
.sample {
    $foo: "local foo";

    // ローカル変数
    content: variable-exists(foo);
        //-> true

    // グローバル変数
    content: variable-exists(g-foo);
        //-> true

    // 存在しない変数
    content: variable-exists(non-existent);
        //-> false
}

global-variable-exists()

global-variable-exists()は、指定されたグローバル変数があるかどうか調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

// 引数には変数名（$は不要）を指定
global-variable-exists($name)

次のように使います。

$g-foo: "global foo";
.sample {
    $foo: "local foo";

    // ローカル変数
    content: global-variable-exists(foo);
        //-> false

    // グローバル変数
    content: global-variable-exists(g-foo);
        //-> true

    // 存在しないグローバル変数
    content: variable-exists(g-non-existent);
        //-> false
}

function-exists()

function-exists()は、関数があるかどうか調べる関数です。

// 引数には関数名を指定
function-exists($name)

次のように使います。

// サンプル用の関数
@function sample-fn() {
    @return true;
}

.sample {
    // ユーザー定義の関数
    content: function-exists(sample-fn);
        //-> true


    // Sassの組み込み関数
    content: function-exists(lighten);
        //-> true
}

mixin-exists()

mixin-exists()は、ミックスインがあるかどうか調べる関数です。

// 引数にはミックスイン名を指定
mixin-exists($name)

次のように使います。

// サンプル用のミックスイン
@mixin sample-mixin() {
    /* ... */
}

.sample {
    // ユーザー定義のミックスイン
    content: mixin-exists(sample-mixin);
        //-> true

    // 存在しないミックスイン
    content: mixin-exists(non-existent);
        //-> false
}

inspect()

inspect()は、デバッグ用の関数です。

// 引数には調べたい値を指定
inspect($value)

CSSとして有効な値でなければコンパイルエラーになったり、変数に入れたnullやネストしたリストの括弧（()）が出力されなかったりと、デバッグが簡単にはできませんでした。inspect()を使うことでこれらの問題を解決できます。

.sample {
    /* 変数に入れたnull */
    $var: 1px null 3px;
    content: $var;             //-> 1px 3px
    content: inspect( $var );  //-> 1px null 3px

    /* 空のリスト */
    $list: ();
    content: $list;             //-> コンパイルエラー
    content: inspect( $list );  //-> ()

    /* ネストしたリスト */
    $list: (1px, (foo (bar baz)), false);
    content: $list;             //-> コンパイルエラー
    content: inspect( $list );  //-> (1px, (foo (bar baz)), false)

    /* マップ */
    $map: (key1: value1, key2: value2);
    content: $map;             //-> コンパイルエラー
    content: inspect( $map );  //-> (key1: value1, key2: value2)
}

また、@debugにも同じ問題がありましたが、inspect()と同様に値を正しく表示するようになりました。

リスト関連

nth()

nth($list, $n)の$nに負の値を指定できるようになりました。負の値を指定するとリストの末尾からの位置になります。

これにより、リストの最後の値の取得が今までよりも簡単になりました。

$list: foo, bar, baz;

nth($list, -1)  //-> baz

// 今まで…
nth($list, length($list))

リストの最後のカンマ

カンマ区切りのリストで、最後にカンマを記述してもコンパイルエラーにならなくなりました。出力時には最後のカンマは取り除かれます。

$list: foo, bar, baz,;

@debug $list;  //-> foo, bar, baz

また、マップも同じように最後にカンマを記述することができます。

$map: (
    key1: value1,
    key2: value2,
);

要素が1つしかないリストの生成

これまでは要素が1つしかないリストを作るのはかなり手間でした。

$list: ();     //-> list
$list: (1);    //-> number !!
$list: (1 2);  //-> list
$list: (1, 2); //-> list

// こうする必要があった
$list: join( (), 1 );    //-> list
$list: append( (), 1 );  //-> list

これからは次のようにするだけでリストとして扱われます。

$list: (1,);

ただし、カンマ区切りのリストになるので、スペース区切りのリストにしたい場合は次のようにします。

$list: join( (), 1, space);
$list: append( (), 1, space);

@each

前回の記事でも少し触れていますが、複数の変数を利用することができるようになりました。

$config: (
    warn: red,
    info: blue,
);

@each $class, $bg-color in $config {
    .#{$class} {
        background-color: $bg-color;
    }
}

これをコンパイルすると次のようになります。

.warn {
  background-color: red;
}

.info {
  background-color: blue;
}

if()

if()は三項演算子みたいな感じのものですが、これまではなぜかtrue/falseの両方の戻り値を評価していたため少し使い勝手が悪いものでした。これからは、条件の結果がtrueならtrueの戻り値だけ評価するようになります。

@extend

@media内で外にあるセレクタを@extendすると、警告ではなくコンパイルエラーとなるように変更されました。

@media screen {
    .foo {
        @extend .bar;
    }
}

.bar { ... }

また、存在しないセレクタを@extendした場合も、警告ではなくコンパイルエラーとなります。!optionalフラグを記述するとコンパイルエラーを回避することができます。

.foo {
     @extend .non-existent !optional;
}

!globalフラグ

ローカル（ネスト内）でグローバル変数と同名の変数に代入する場合、グローバル変数の値が変更されていましたが、それがデフォルトの挙動ではなくなります。そのような場合、将来的には、新しいローカル変数が作られて処理されることになり、グローバル変数を上書きする場合には「!global」フラグをつけて明示することが必要になるようです。Sass 3.3.0.rc.2でも「!global」フラグをつけないと警告が表示されてしまいます。

$var: true;

.sample {
    // グローバル変数を上書きしたい場合
    $var: false !global;
    ...
}

おわりに

師走だからというわけではありませんが、いろいろと駆け足で解説しました。筆者としてはライブラリに使えるものが増えたので嬉しいのですが、普通の制作には不要なものも少なくないと思います。無理に使ってみるのではなく、必要に応じて取り入れることをお勧めします。

よいお年を。

前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。

マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。

マップとは

マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。

マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。

// マップ
$map: (
    key1: value1,  // key1にvalue1を設定
    key2: value2,
    key3: value3,
);

// CSSのスタイル
selector {
    property1: value1;  // property1にvalue1を設定
    property2: value2;
    property3: value3;
}

マップの値には、マップも含めたすべてのタイプのデータを書くことができます。

$map: (
    key1: 10px,             // 数値
    key2: "string",         // 文字列
    key3: #fff,             // カラー
    key4: true,             // ブーリアン
    key5: null,             // null
    key6: (foo, bar, baz),  // リスト（カンマ区切り）
    key7: foo bar baz,      // リスト（スペース区切り）
    key8: (                 // ネストしたマップ
        key1: value1,
        key2: value2,
        ...
    ),
);

Sass 3.3よりも前までは、複雑なデータ構造を作るにはリストを使って頑張るしかありませんでした。 ですが、マップを使えば、より分かりやすく書くことができますし、専用の関数もあるのでデータを扱いやすくなります。

マップ用の関数

マップ用の関数は5つあります。

• map-get($map, $key)
• map-merge($map1, $map2)
• map-keys($map)
• map-values($map)
• map-has-key($map, $key)

map-get()

map-get()は、指定したキーの値を取得する関数です。

// 引数の1つ目にマップ、2つ目にキーを指定
map-get($map, $key)

次のようにして使います。

$map: (
    key1: 10px,
    key2: 20px,
    key3: (
        nested-key1: red,
        nested-key2: blue,
    ),
);

.map {
    margin: map-get($map, key1);
}

これをコンパイルすると次のようになります。

.map {
  margin: 10px;
}

指定したキーがマップにない場合は、nullが返されます。

また、map-get()を複数回使うことで、ネストされたマップから値を取得することができます。

.map {
    color: map-get( map-get($map, key3), nested-key1 );
}

これをコンパイルすると次のようになります。

.map {
  color: red;
}

何回もmap-get()を書くのは正直面倒くさいですし、コードが読みづらいですね。。

map-merge()

map-merge()は、2つのマップをマージする関数です。

// 引数の1つ目と2つ目にマージしたいマップを指定
map-merge($map1, $map2)

基本的には1つ目のマップの後に、2つ目のマップが追加されますが、同じキーがある場合は2つ目のマップの値で上書きされます。

$map1: (
    key1: value1,
    key2: value2,
    key3: value3,
);

$map2: (
    key4: value400,
    key5: value500,
    key1: value100,
);

$new-map: map-merge($map1, $map2);

この場合、$new-mapの値は次のようになっています。

(key1: value100, key2: value2, key3: value3, key4: value400, key5: value500)

key1は両方のマップにあるので、2つ目のマップの$map2の値が使われています。 そして、key3の後に$map2にあったkey4とkey5が追加されています。

このような特徴を利用して、ライブラリ内の設定用マップなどを自身のプロジェクトに合わせて上書きするといったこともできます。

map-keys()

map-keys()は、1つのマップ内のすべてのキーをカンマ区切りのリストで返す関数です。

// 引数にはマップを指定
map-keys($map)

それではサンプルを見てみましょう。

$map: (
    key1: 10px,
    key2: 20px,
    key3: (
        nested-key1: red,
        nested-key2: blue,
    ),
);

.map {
    content: map-keys($map);
}

これをコンパイルすると次のようになります。

.map {
  content: key1, key2, key3;
}

ネストされたマップ内のキーを取得するには、map-get()を併用する必要があります。

.map {
    content: map-keys( map-get($map, key3) );
}

これをコンパイルすると次のようになります。

.map {
  content: nested-key1, nested-key2;
}

map-values()

map-values()は、1つのマップ内のすべての値をカンマ区切りのリストで返す関数です。

// 引数にはマップを指定
map-values($map)

使い方はmap-keys()と同じです。

.map {
    content: map-values($map);
        //-> 10px, 20px, ( nested-key1: red, nested-key2: blue )
        // 値にマップが含まれるため、実際にはエラーが出ます
}

map-has-key()

map-has-key()は、1つのマップ内に特定のキーがあるかどうか調べる関数です。

// 引数の1つ目にマップ、2つ目に調べたいキーを指定
map-has-key($map, $key)

戻り値はtrueかfalseです。

$map: (
    key1: 10px,
    ...
);

$has-key1: map-has-key($map, key1);

この場合、$has-key1の値は true になっています。

リスト用の関数

マップにはリスト用の関数も使うことができます。

• nth()
• length()
• zip()
• join()
• append()
• index()

使い方とコンパイル結果を簡単にまとめると次のようになります。

$map1: (
    key1: value1,
    key2: value2,
);

$map2: (
    key4: value400,
    key1: value100,
);

.sample {
    /* nth() */
    content: nth($map1, 1); //-> key1 value1

    /* length() */
    content: length($map1); //-> 2

    /* zip() */
    content: zip($map1);
        //-> key1 value1, key2 value2
    content: zip($map1, $map2);
        //-> key1 value1 key4 value400, key2 value2 key1 value100

    /* join() */
    content: join($map1, $map2);
        //-> key1 value1, key2 value2, key4 value400, key1 value100
    content: join($map1, $map2, space);
        //-> key1 value1 key2 value2 key4 value400 key1 value100

    /* append() */
    content: append($map1, foo bar);
        //-> key1 value1, key2 value2, foo bar
    content: append($map1, foo bar, space);
        //-> key1 value1 key2 value2 foo bar

    /* index() */
    content: index($map1, key1); //-> false
    content: index($map1, key1 value1); //-> 1
}

@eachで使う

@eachはSass 3.3から複数の変数を指定できるようになったので、マップのキーと値を別々の変数に入れて利用することができます。

.box {
    $config: (
        warn: red,
        info: blue,
    );

    // キーは$classに、値は$bg-colorに入ります
    @each $class, $bg-color in $config {
        @at-root #{&}-#{$class} {
            background-color: $bg-color;
        }
    }
}

これをコンパイルすると次のようになります。

.box-warn {
  background-color: red;
}
.box-info {
  background-color: blue;
}

これまでと比べて、断然扱いやすいものになっていると思います。

可変長キーワード引数

マップを可変長引数のような感じでミックスインや関数に渡すことができます。 可変長引数と可変長キーワード引数のそれぞれの場合を、次のミックスインを使って解説します。

@mixin box($border, $bgColor, $color) {
    border: $border;
    background-color: $bgColor;
    color: $color;
}

まずは可変長引数を使った場合です。

.box {
    // 値はミックスインの引数の順番に合わせる
    $config: 1px solid #ccc, #fff, #333;

    // 変数の後ろに「...」をつけ、可変長引数としてミックスインに渡す
    @include box($config...);
}

$configの1つ目の「1px solid #ccc」が$borderに、2つ目の「#fff」が$bgColorに、そして3つ目の「#333」が$colorに渡されます。 これをコンパイルすると次のようになります。

.box {
  border: 1px solid #cccccc;
  background-color: white;
  color: #333333;
}

次にマップを使った可変長キーワード引数の場合です。

.box {
    $config: (
        // キーはミックスインの引数名に合わせる。記述順は問わない
        color: #333,
        bgColor: #fff,
        border: 1px solid #ccc,
    );

    @include box($config...);
}

コンパイル結果は可変長引数の場合と同じになります。

マップを使った場合は、キーと同名のミックスインの引数に値が渡されます。キー「color」はミックスインの引数の「$color」に対応するということです。 そのため、マップ内のキーをミックスインの引数の順番に合わせて記述する必要はありません。

ちなみに、可変長引数と併用することもできますが、その場合は可変長キーワード引数を可変長引数の後に記述する必要があります。

また、Sass 3.3から追加されたkeywords()関数を使って、可変長キーワード引数をマップに変換する関数をつくることができるようです。

@function create-map($args...) {
  @return keywords($args);
}

$map: create-map($key1: 10px, $key2: 20px);

この場合、$mapの値は (key1: 10px, key2: 20px) になっています。

マップのような構造のリスト

リストで2つの値をペアにして、マップのようにして使っていた場合、そのリストに対してマップ用の関数を使うことができます。

$map: (
    key1 value1,
    key2 value2,
);
$map2: (
    key4 value400,
    key1 value100,
);

@debug map-get($map, key1);
       //-> value1
@debug map-merge($map, $map2);
       //->  (key1: value100, key2: value2, key4: value400)
@debug map-keys($map);
       //-> key1, key2, key3
@debug map-values($map);
       //-> value1, value2, value3
@debug map-has-key($map, key2);
       //-> true

ただし、将来的にはこのようなリストに対してマップ用の関数を使うことはできなくなるようで、コンパイル時には警告が出されます。Sass 3.3が使えるようになったら、マップに切り替えていった方がが良さそうです。

おわりに

新しいデータタイプ「マップ」を解説しました。筆者としては、自前のライブラリ内のリストでなんとかしている箇所をとりあえず置き換えるつもりですが、みなさんはどのように使われますか？

10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。

HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。

Sass 3.2の「&」

「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。

// Sass 3.3よりも前の「&」の用途の例
.foo {
    &:hover  { ... } //-> .foo:hover
    &:after  { ... } //-> .foo:after
    &.bar    { ... } //-> .foo.bar
    & + .bar { ... } //-> .foo + .bar
    & > .bar { ... } //-> .foo > .bar
    .bar & { ... }   //-> .bar .foo
}

「&」を使って、親のクラス名を子のクラス名の一部にすることはできませんでした。

.foo {
    // .foo-barにしたいけど…
    &-bar { ... }  //-> ERROR
}

Sass 3.3の&

Sass 3.3からは「&」をより多くの場所で使うことができるようになりました。 前述の「親のクラス名を子のクラス名の一部にする」には次のようにします。

.foo {
    #{&}-bar { ... }  // #{}（インターポレーション）を使います
}

これをコンパイルすると次のようになります。

.foo .foo-bar { ... }

「&」はセレクタに使用するだけでなく、変数の値に指定することもできるようになりました。

.foo, .bar .baz {
    $selector: &;  // #{}は不要です
}

このようにした場合、$selectorには (“.foo”, (“.bar” “.baz”)) というようにリストとして格納されます（実際にtype-of()で調べると list が返ってきます）。括弧や引用符で囲まれていますが、実際にはそれらは外された状態で使用されます。

.foo, .bar .baz {
    $selector: &;
    content: $selector;
}

これをコンパイルすると次のようになります。

.foo, .bar .baz {
  content: .foo, .bar .baz;
}

「&」を使ってBEM

では、「&」を使ってBEMっぽく書いてみましょう。

.block {
    // .block__element
    #{&}__element {
        ...

        // .block__element--modifier
        #{&}--modifier { ... }
    }
}

これをコンパイルすると次のようになります。

.block { ... }
.block .block__element { ... }
.block .block__element .block .block__element--modifier { ... }  // ?!

.block__elementの前の.blockはともかく、.block__element–modifierの一つ前にも.blockが出力されてしまっています…。 次のようにネストを減らして書くことで、これを回避することもできますが、、

.block {
    #{&}__element { ... }
    #{&}__element--modifier { ... }
}

この方法だと__elementを何度も書くことになってしまいます。.block__elementの前の.blockを出力しなくてもよいという運用ルールであれば、次に紹介する@at-rootで解決することができます。

@at-root

@at-rootの基本機能は、記述した場所より上のセレクタのネストを解除するというものです。
使い方は次のとおりです。

.foo {
    // 1つのルールセットのみに適用する
    @at-root .bar { ... }

    // 複数のルールセットに適用する
    @at-root {
        .baz { ... }
        .qux {
            ...

            .quux { ... }
        }
    }
}

これをコンパイルすると次のようになります。

.foo { ... }
.bar { ... }
.baz { ... }
.qux { ... }
.qux .quux { ... }

.qux .quux { … }の.quxを取り除いて.quux { … }としたい場合は、.quuxの前にも@at-rootを記述します。

では、前節の問題を解決します。

.block {
    @at-root {
        // .block__element
        #{&}__element {
            ...

            @at-root {
                // .block__element--modifier
                #{&}--modifier { ... }
            }
        }
    }
}

これをコンパイルすると次のようになります。

.block { ... }
.block__element { ... }
.block__element--modifier { ... }

ようやくすべてフラットにすることができました。

ただ、@at-rootの分だけネストが多くなったのが気になるかもしれません。
ネストを減らしたい方は@at-rootを隠蔽したミックスインを使うことを検討してみてください。

@at-rootの応用

@media内で@at-rootを使用した場合、そのルールセットは@media内に出力されます。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root {
            .bar {
                padding: 0;
            }
        }
    }
}

これをコンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
  .bar {  /* @media内に出力される */
    padding: 0;
  }
}

@mediaの外に.barを出したい場合は、@at-root (without: …)を使います。

@at-root (without: … )

次のように@at-root (without: media)とすると@mediaの外に出すことができます。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root (without: media) {
            .bar {
                padding: 0;
            }
        }
    }
}

コンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
}
.foo .bar {
  padding: 0;
}

@mediaの外には出されましたが.foo .bar { … }となってしまいました。.fooを取り除いて.bar { … }としたい場合は、withoutの値にruleを追加します。

@media screen and (max-width:320px) {
    .foo {
        margin: 0;

        @at-root (without: media rule) {
            .bar {
                padding: 0;
            }
        }
    }
}

これをコンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
}
.bar {
  padding: 0;
}

このようにwithoutと後述するwithには、スペース区切りで複数の値を指定することができます。

前述の例では、@at-root(without: media rule)としましたが、必ずドキュメントルートに出力したい場合は(without: all)と記述した方が良いです。

@at-root(without: rule)は@at-rootのみ記述した場合と同じです。推測ですが、@at-rootには初期値として(without: rule)が設定されていると思われます。(without: media)とした場合は、初期値を上書きするので(without: rule media)のようには処理されなかったと考えられます。

また、withoutとwithは同時に指定することはできませんでした。(with: …)を指定した場合も初期値(without: rule)が上書きされてしまうようです。

@at-root(with: … )

では最後に(with: …)ですが、これに指定したもの以外が除外されます。以下にいくつかのサンプルを記載しておきますので、どのように出力されるか確認してみてください。

@media screen and (max-width:320px) {
    .foo {
        @supports ( display: flex ) {
            @at-root (with: rule) {
                .bar {
                    width: 0;
                }
            }
            @at-root (with: supports) {
                .baz {
                    height: 0;
                }
            }
            @at-root (with: media) {
                .qux {
                    margin: 0;
                }
            }
            @at-root (with: media rule) {
                .quux {
                    padding: 0;
                }
            }
        }
    }
}

コンパイルすると次のようになります。

@media screen and (max-width: 320px) {
  .qux {        /* (with: media) */
    margin: 0;
  }
  .foo .quux {  /* (with: media rule) */
    padding: 0;
  }
}
.foo .bar {     /* (with: rule) */
  width: 0;
}
@supports (display: flex) {
  .baz {        /* (with: supports) */
    height: 0;
  }
}

おわりに

「&」の新機能と@at-rootを解説しましたが、いかがだったでしょうか。確かにメリットもありますが、「&」はクラス名の検索がしづらくなりますし、@at-rootは出力後のCSSがどうなるかが想像しにくいケースが出てくるなど、デメリットもあります。筆者としては、これらを利用する場合は用途を限定するなどのルールを設けたいと思いました。