読者です 読者をやめる 読者になる 読者になる
月 の 上

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; }

やった〜