Ändern Mixin Variable basierend auf Medium (oder einer anderen Bedingung)

Question

Angenommen, ich habe eine komplexe Mixin-Funktion. So etwas wie

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

Und dann will ich diese mixin nennen mit unterschiedlichen Werten für verschiedene Medien z.B.

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

Dies funktioniert gut, mit Ausnahme der generierten CSS dupliziert die alle Sachen, die

@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 */ 
    } 
} 

, die nicht geändert hat, unnötig zu sagen, ist ziemlich verschwenderisch, wenn nur eine Sache verändert.

Gibt es Workarounds für eine schlankere Ausgabe, die nicht erfordern, dass die aufrufende Klasse etwas darüber weiß, was der Mixin macht oder ob der Mixin über die Medienregeln Bescheid weiß? Ich dachte, vielleicht könnte ein losgelöster Regelsatz helfen, aber wenn Variablen nicht von denen exportiert werden, bin ich mir nicht sicher, wie das aussehen würde.

gewünschte Ausgabe:

@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

entfernen statische Stile von Ihrem mixin und legen Sie sie direkt an SomeClass Wähler.

.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); 
    } 
} 

Bessere Lösung:

.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); 
    } 
    } 
} 

Jetzt mixin tut nur eine Sache. Es ist einfach und wiederverwendbar.