小ネタ
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; }
やった〜