2

それ自体で同じルールセットを使用しようとしてい.formater()ます。構文エラーが発生しています。

ルールセットをそれ自体で使用できないのはなぜですか?

.formater(@className;@rules){
    .@{className}{
        @rules();
    }
}

.formater(mainContainer;{
    display:block;
    line-height:2em;
    & a{
       colour: blue;
       &.formater(link;{
         colour:red;
       });
    }
});

どんな助けでも大歓迎です。

4

1 に答える 1

2

構文エラーの理由は、&許可されていない mixin 呼び出しに追加しているためです。&セレクターにのみ取り付けることができます。&mixin 呼び出しの前に fromを削除すると、コードは正常にコンパイルされます。

.formater(@className; @rules){
  .@{className}{
    @rules();
  }
}

.formater(mainContainer; {
  display:block;
  line-height:2em;
  & a{
    colour: blue;
    .formater(link; {
      colour:red;
    });
  }
});

上記の Less コードをコンパイルすると、次の CSS が生成されます。

.mainContainer {
  display: block;
  line-height: 2em;
}
.mainContainer a {
  colour: blue;
}
.mainContainer a .link {
  colour: red;
}

お気づきかもしれませんが、上記の出力である最終的なセレクターは.mainContainer a .linkand not.mainContainer a.linkです。後者を達成しようとしている場合、1 つのオプションは、ミックスインのコード自体に を追加すること&です.formater。

.formater(@className; @rules) {
  &.@{className} {
    @rules();
  }
}

以下のオプションを使用することはあまりお勧めしませんが、.formater()ミックスインで両方のバリエーションをサポートする必要がある場合は、変数をガード条件とともに使用し、必要に応じて使用できます。

.formater(@className; @rules; @parent-append: false) {
  & when not (@parent-append = false) {
    &.@{className} {
      @rules();
    }
  }
  & when (@parent-append = false) {
    .@{className} {
      @rules();
    }
  }  
}

その後、ミックスインを次のように呼び出すことができます

.formater(link; {colour:red;}; true); /* if & should be appended */

また

.formater(link; {colour:red;};); /* if & need not be appended */
于 2015-11-18T07:38:55.313 に答える