メディアに基づくmixin変数の変更

Question

私は複雑なミックスイン機能を持っていると言います。

.MyMixin(@Count, @ManyOtherVars) 
{ 
    .Item 
    { 
    width: calc(100%/@Count); 
    } 
    //lot's of other rules not affected by @Count 
} 

ような何かそして私は、異なるメディア 例えばごとに異なる値を使用して、このミックスインを呼びたいです

.SomeClass 
{ 
    @media screen (max-width: 1000px) 
    { 
    .MyMixin(5, 1); 
    } 
    @media screen (min-width: 1000px) 
    { 
    .MyMixin(10, 1); 
    } 
} 

これは、生成されたCSSを除いて、正常に動作しますが、言うまでもなく、

@media screen (max-width: 1000px) 
{ 
    .SomeClass .Item 
    { 
    width: calc(100%/5); 
    } 
    .SomeClass 
    { 
    /* lot's of other rules not affected by @Count */ 
    } 
} 

@media screen (min-width: 1000px) 
{ 
    .SomeClass .Item 
    { 
    width: calc(100%/10); 
    } 
    .SomeClass 
    { 
    /* lot's of other rules not affected by @Count */ 
    } 
} 

どちらが変更されていないすべてのものを複製一つだけが変更されたとき、非常に無駄です。

mixinが何をするかを知るために、またはミックスインがメディアルールについて知るために、呼び出し側クラスを必要としない、よりリーンな出力を生成する回避策はありますか？ 私は、分離されたルールセットが助けになるかもしれないと思ったかもしれませんが、与えられた変数はそれらからエクスポートされません。

所望の出力：

@media screen (max-width: 1000px) 
{ 
    .SomeClass .Item 
    { 
    width: calc(100%/5); 
    } 
} 

@media screen (min-width: 1000px) 
{ 
    .SomeClass .Item 
    { 
    width: calc(100%/10); 
    } 
} 
.SomeClass 
{ 
    /* lot's of other rules not affected by @Count */ 
} 

Answer 1

あなたのミックスインから静的なスタイルを削除し、SomeClassセレクタに直接配置します。

.SomeClass { 
    // Lot's of other rules not affected by @Count 

    @media screen (max-width: 1000px) { 
    .MyMixin(5, 1); 
    } 
    @media screen (min-width: 1000px) { 
    .MyMixin(10, 1); 
    } 
} 

よりよい解決策：

.MyMixin(@Count, @ManyOtherVars) { 
    width: calc(100%/@Count); 
} 

.SomeClass { 
    // Lot's of other rules not affected by @Count 

    .Item { 
    @media screen (max-width: 1000px) { 
     .MyMixin(5, 1); 
    } 
    @media screen (min-width: 1000px) { 
     .MyMixin(10, 1); 
    } 
    } 
} 

今のmixinだけ一つのことを行います。シンプルで再利用可能です。