先日、LessでBEMってみたらかなりさくさくコーディングできた！という話という記事で、Sassを全力でDisったような気がしますが、

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

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

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


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

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

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

@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なんていらんかったんや・・・・・

.foo {
	&__bar {
		
	}
}

SassのRC版は、

gem install sass --pre

Compassは、

gem install compass --pre

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

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

この間コーディングでfloatとheightでやるのも嫌だなぁと思い、inline-blockを活用したのですが、隙間を消すのに意外に苦労したので、メモ。
letter-spacingで隙間を消すのが有名だと思いますが、それだとOperaでチェックした時に隙間が消えない！という問題に先日の案件で直面しました。

[html]
<div class="columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
[/html]

[css]
.columns {
letter-spacing: -0.4em;
word-spacing: -1em;

}

.column {
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
/display: inline;
/zoom: 1;
}
[/css]

word-spacingを指定すると、Operaでも隙間が消えるみたいです。ただ、Webkit系のブラウザはword-spacingだと効かないみたいです。
inline-blockって意外にブラウザ間で実装が違うみたいですね。ie8以上案件ならdisplay:table-cellを使う方が無難かも知れないですね。

ウェブルのsoraiyさんがCSS3 で3の倍数の要素にスタイルを適用するなんてエントリーを書いていたので、つい出来心でやってしまいました。

今更なネタな気もしないでも無いですがそこはスルーで。
せっかくなので、nth-of-typeでやります。

デモはこちら

[css]
li {
list-style: none;
counter-increment: n;
display: inline;
}

li:after {
content: " , " counter(n);
}

li:first-of-type:after {
content: counter(n);
}

li:nth-of-type(3n):after {
content:" , Fizz";
}

li:nth-of-type(5n):after {
content:" , Buzz";
}

li:nth-of-type(15n):after {
content:" , FizzBuzz";
}

[/css]

[html]
<ol>
<li></li>
<li></li>
~略~
<li></li>
</ol>
[/html]

ちゃんとFizzBuzzになってるでしょう・・・？
別にliでやる必要性は無いんですが、同じものがたくさん並ぶときってついliでやっちゃいますよね。

CSS2.1で定義された疑似要素、:before,:after。
しかし以外に使い方を知らないって人が多いはず。

clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。

(さらに…)