sass.md

rcが取れてsass 3.3.0になったので、&の扱いについて調べ中...

• sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！
• Sass 3.3.0.rc.1で実装された#{&}-hogeの記法は廃止になった。

3.3.0で色々してみたサンプル

http://sassmeister.com/gist/9461261

rc2から上げる人がやらないといけないこと

• $selector: &;が使えないので頑張る
• #{&} が使えないので &に書き換える

以下いろいろした履歴

sass 3.3.0.rc.2

/* sample.scss */
.block {
	background-color: black;
	#{&}__element {
		background-color: red;
	}
}

/* sample.css */
.block {
  background-color: black; }
  .block .block__element {
    background-color: red; }

sass 3.3.0

.block {
	background-color: black;
	#{&}__element {
		background-color: red;
	}
}

で、コンパイルする

Syntax error: Invalid CSS after "	#{": expected expression (e.g. 1px, bold), was "&}__element {"
        on line 6 of sample.scss
  Use --trace for backtrace.

エラー。rc中に #{&}__element から &__emelent になったようだ...（たぶんrc.3から）
なので、以下のように書く。

/* sample.scss */
.block {
	background-color: black;
	&__element {
		background-color: red;
	}
}

コンパイルする。

/* sample.css */
.block {
  background-color: black; }
  .block__element {
    background-color: red; }

あれーっ!?入れ子じゃないよ...?
とりあえず、at-rootを使ってみる。

/* sample.scss */
.block {
	background-color: black;
	&__element {
		background-color: red;
	}
	@at-root &__element2 {
		background-color: red;
	}
}

コンパイル。

/* sample.css */
.block {
  background-color: black; }
  .block__element {
    background-color: red; }
  .block__element2 {
    background-color: red; }

おやぁ…？入れ子になってないぞ…

入れ子にする(1)

//sample.scss
.block {
	background-color: black;
	& &__elem {
		background-color: tomato;
	}
}

コンパイル

.block {
  background-color: black; }
  .block .block__elem {
    background-color: tomato; }

やった！！できた！！！（白目