LessとSassで "&" を使った時クラスをextendするときの違い

小ネタ

Lessの場合

foo.less

.foo {
  &__foo {
    color: red;
  }
}

bar.less

@import "./foo";

.bar {
  &:extend(.foo__foo);
}

ビルド

~/lsss  ᐅ lessc bar.less
extend ' .foo__foo' has no matches
.foo__foo {
  color: red;
}

extendじゃなくて .bar { .foo__foo } って書いてもやっぱダメ

~/lsss  ᐅ lessc bar.less
NameError: .foo__foo is undefined in /Users/amagitakayosi/lsss/bar.less on line 4, column 3:
3 .bar {
4   .foo__foo;
5 }

そんな〜

手で .foo__foo { ... } って書けばちゃんとmixinできる。そんな〜

Sassの場合

foo.scss

.foo {
  &__foo {
    color: red;
  }
}

bar.scss

@import "./foo";

.bar {
  @extend .foo__foo;
}

ビルド

~/lsss  ᐅ node-sass bar.scss
.foo__foo, .bar {
  color: red; }

やった〜

ランダム

上を見ると、おそらく三角形をした星たちの間に、何か頼りなくよろめく点滅がある。

向かって左手、東の空は黄色く、子供達の散乱した酒気を反映する。反対の空は夕焼けから徐々に熱を冷ました紫の雲を浮かべている。 両サイドの色は正面で混じり合って透明に消滅し、予報とは違う曇り空の中にもわずかに星を見つける事ができる。 その隙間を見つめていた後輩は、コンビニから帰ってきた僕にその惑星を指さして見せた。

雲は相当な速度で流れている。 あの星は高い宇宙で空気に洗われて自分の居場所を見失っているのかも知れない。

本当の理由は単純で、僕達は長いことビールを飲み過ぎたんだ。 冷えた土の上に座って弱くなった脚と瞳とが、まっすぐに立つことも見据える事もできず、現在位置も覚束ない日常を反映するかのように、風景を揺らしていた。

歩道への小さな坂を登ると貧血がする。 もう少し話そうぜと水面が呼んでる。 彼は失えないことについて、僕は得られないことについて話した。 4時間におよぶ議論の末、お互いの問題について、けれど僕達は保留をしたのだった。

湖の北側には森があって、北極星は誰もいない森の影で静かに回らないでいる。 僕たちが共有したのは、波に吸い込まれる言葉の静けさと、弱々しく光るぎこちない道標だけだった。 それでも僕達はその可愛い光を、確かに見つけた。 それは次の一年間をやっていくのに充分だった。

タクシーで去る彼に手を振って、改札への階段を下る。 間際、振り返ってもう一度惑星をさがす。 そこに既に光は見えず、さっきとはまた違う色の雲が街を被っていた。