# sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！

- リンク: https://torounit.com/blog/sass-3-3-0-rc-3-%e3%81%8b%e3%82%89%e3%80%81%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%9d%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%aa%e3%81%97%e3%81%a7%e3%80%81%e3%80%8c%e3%80%8d%e3%82%92/
- 公開日: 2014-02-15T21:12:35+09:00
- 作成者: Toro\_Unit

先日、[LessでBEMってみたらかなりさくさくコーディングできた！という話](https://torounit.com/blog/2013/12/12/1693/)
という記事で、Sassを全力でDisったような気がしますが、

いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc.3を突っ込んでみま
した。

Compassも1.0.0の開発版にアップデートし、いざ、SassでBEMるぞ！！！と、かの有名なBEM
用Mix-in

    ```decode:true
    @mixin e($name) {
      @at-root   #{&}__#{$name} {
        @content;
      }
    }


    @mixin m($name) {
      @at-root   #{&}--#{$name} {
        @content;
      }
    }
    ```

を突っ込んでみたんですが、このMix-inでコンパイルエラー。これはrc.2にしてみたらうまく
いったのですが、Compassのバージョンを落としたりが面倒くさくて挫折。rc.3のバグなの
かな？と思っていました。

そして、本日、rc.4が出ていたので、改めて再トライ。しかし同じエラーが出現。これは
いくら何でも。。。と思い、Sassどうした！って思っていたのですが、試しに、

    ```decode:true
    @mixin e($name) {
      @at-root   &__#{$name} {
        @content;
      }
    }


    @mixin m($name) {
      @at-root   &--#{$name} {
        @content;
      }
    }
    ```

としてみたら、コンパイルが通ってしまいました。

ちゃんとMix-inも無事動きます！
 rc.3でも動きました。Oh…

もちろん、これも動きます！しかも、@at-root書かなくても大丈夫。Lessとかと全く同じ
挙動です。
 BEM用Mix-inなんていらんかったんや・・・・・

    ```decode:true
    .foo {
    	&__bar {

    	}
    }
    ```

SassのRC版は、

    ```decode:true
    gem install sass --pre
    ```

Compassは、

    ```decode:true
    gem install compass --pre
    ```

でインストールできます。

やっぱりSassは最強でした。