0

LESS をSimpLESSでコンパイルしていますが、コンビネータの使用方法にバグがあると思われるものに遭遇しました&。マークアップは次のとおりです。

<div class="parent">
  <div class="child-1 child-2">
    Hello
  </div>
</div>

基本的な LESS コードは次のとおりです。

.child-1 {
  color: red;
    .parent & {
    color: yellow;
    &.child-2 {
      color: blue;
    }
  }
}

予想される CSS 出力:

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

SimpLESS からの実際の出力:

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1 .child-2 { // extra space between .child-1 and .child-2
  color: blue;
}

ご覧のとおり、「Hello」が黄色か青色かの違いです。正しい LESS コンパイルはどれですか? なぜSimplESSはこれを間違えるのでしょうか?

4

1 に答える 1

1

正しい出力は

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

だからあなたはあなたが期待するものに正しいです。http://less2css.org/にアクセスすると、再確認できます。これは、 http://lesscss.org/の「Try it now」の下にリンクされているサイトです。

おそらく、SimpLESS パーサーでバグを発見したことでしょう。

于 2013-06-18T13:59:00.817 に答える