LESS - &:extend()と引数なしMixinの違い

LESSでクラス定義を&:extend()と引数なしMixinした場合の結果がどう違うのかテストしてみた。どちらも事前定義したクラス定義を適用するものである。

.btn-test {
    text-align:center;
    border:1px solid gray;
    color:black;
    &:hover {
        background-color:red;
    }
}

// mixin
.btn-mixin {
    .btn-test();
}

// extend
.btn-extend {
    &:extend(.btn-test all);
}

結果は以下の通り。&:extend()の方がファイルサイズ圧縮という点で効率的である。

.btn-test,
.btn-extend {
  text-align: center;
  border: 1px solid gray;
  color: black;
}
.btn-test:hover,
.btn-extend:hover {
  background-color: red;
}
.btn-mixin {
  text-align: center;
  border: 1px solid gray;
  color: black;
}
.btn-mixin:hover {
  background-color: red;
}

ちょっと思ったのは、.btn-testをテンプレート的に使用したい場合は、.btn-testのコードは実際のHTML上では使用されない。そのコードは冗長なのでCSSには含みたくない。引数つきのmixinであれば実際に利用されない場合そのコードは生成されない。ひょっとして.btn-test()として定義すればうまくいくのかな？と思って試してみた。

.btn-test() {
    text-align:center;
    border:1px solid gray;
    color:black;
    &:hover {
        background-color:red;
    }
}

// mixin
.btn-mixin {
    .btn-test;
}

// extend
.btn-extend {
    &:extend(.btn-test all);
}

結果は以下の通り。&:extend()では展開されなかった。残念。。

.btn-mixin {
  text-align: center;
  border: 1px solid gray;
  color: black;
}
.btn-mixin:hover {
  background-color: red;
}

まあ&:extend()での展開のされ方を見ると、できないのは当たり前かなとも思う。