基於媒體（或其他條件）更改mixin變量

Question

說我有一個複雜的mixin函數。像

.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的功能，或者讓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

從你的mixin刪除靜態風格，直接將他們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); 
    } 
    } 
} 

現在混入只做一件事。它很簡單，可重複使用。