LESSの2つの全く異なるコンテキストで同じクラスを使用していますか？

Question

私はクラスcity-togglerを持っているとしましょう。

私は現在、ここでクラスを持っている：

#city { 
    .city-header { 
     .box { 
      .city-toggler { 
       //styles here 
      } 
     } 
    } 
} 

は、今私は、たとえば、ウェブサイトでは完全に無関係な場所にcity-toggler要素を追加する必要があります。

.footer-holder -> .footer -> .footer-section -> .city-toggler 

は、私はどのように行うのですか上からすべてのスタイルをコピーしないでこれはあまりないですか？

city-togglerをLESS構造から取り出して別に使用することができますが、より良い解決策があると思いますか？

Answer 1

city-togglerは、特定のコンテキストに依存しない場合、コンテキストに依存しない定義は悪いことではありません。コードをコピーする必要はありません。

これを行う次のいずれかの

.city-toggler { 
    /* all styles of a default city-toggler */ 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

#footer { 
    /* same as for #city */ 
} 

または、（ミックスインなどを介していなくてもコンパイルCSSで、）コードをコピーしないようにするが、いかなる状況において使用されるように都市トグラーを防ぐために、これを行います：

#city, #footer { 
    .city-toggler { 
    /* all styles of a default city-toggler */ 
    } 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

Answer 2

ミックスインは、あなたのために働く必要があります。

.my-mixin{ 
     background-color:#FFF; 
    } 
    #city { 
    .city-header { 
     .box { 
      .city-toggler { 
       .my-mixin; 
      } 
     } 
    } 
    .otherplace { 
     .city-toggle { 
     .my-mixin; 
     } 
    } 
}