3

私は、LESS を使用して、再利用可能なコンポーネント/ウィジェットのスタイルを定義するための非常にエレガントなパターンと思われるものを使用してきました。LESS 1.3 以降では問題なく動作しますが、最近アップグレードした後、ライブラリ全体が壊れてしまいました。1.4以降でこのようなことを達成する方法を知っている人はいますか?

コンポーネントの非常に単純な例を次に示します。

#componentName {
  .loadMixins(){
    .text() {}
    .header() {}
  }

  .apply(){
    > h3 {
      // markup-specific styles
      padding: 3px;
      margin-bottom: 0;

      // custom styles
      .header();
    }

    > div.body, > div.popup p {
      color: red;

      // custom styles
      .text()
    }
  }
}

そして、これがどのように使用されるかは次のとおりです。

.coolWidget {
  #componentName.loadMixins();

  // override mixins here
  .text(){
    color: green;
  }

  #componentName.apply();
}

これにより、マークアップに依存するすべてのスタイルがユーザーから抽象化されたままになります。マークアップを完全に変更しても、ユーザーのスタイルは引き続き機能します。less.jsの変更ログによると、1.4.0 Beta 1 には「ミックスインの変数が呼び出しスコープに「リーク」しなくなりました」という行があります。

これを回避する方法はありますか?

4

1 に答える 1