Abzüglich: Die Kombination Selektor Variablen

Question

Gegeben Ich möchte folgendes weniger Code vereinfachen:

@title1: ~"h1.someclass > a"; 
@title2: ~"h1.otherclass > a"; 

@{title1},@{title2} { 
    &:after { 
    display: none; 
    } 
} 

, die ausgewertet:

h1.someclass > a:after, 
h1.otherclass > a:after { 
    display: none; 
} 

ich die Klassen zu verschmelzen versuchte von

@titles: ~"@{title1},@{title2}"; // Combine selectors for easier code 
@{titles} { 
    &:after { 
    display: none; 
    } 
} 

mit

Dies wird jedoch unterschiedliche CSS ergeben.

h1.someclass > a,h1.otherclass > a:after { 
    display: none; 
} 

Liegt das an der Lazy Evaluation der Variablen? Wenn ja, warum ergibt es das CSS? Und gibt es eine andere Möglichkeit, Selektorvariablen zu kombinieren und später & zu verwenden: nach?

Answer 1

(fast Copy- Einfügen aus dem umfassen https://stackoverflow.com/a/23954580/271274)

Im moment gibt es zwei Probleme mit Ihrem Versuch:

1. definitionsgemäß ein Gehalt an escaped strings ist kein Thema für jede Art von Bewertung auf alle, also haben Kommas (wie auch alle anderen Spezialoperationen) keine Bedeutung.
2. Variable Interpolation in Selektoren geht davon aus, dass eine einzelne interpolierte Variable nur ein einzelnes Selektorelement enthält. Also, streng genommen, sogar ~"h1.someclass > a" ist schon nichts anderes als ein Hack erwartet, Nebenwirkungen und unspezifiziert/undefiniertes Verhalten für alles andere als extrem triviale Fälle zu haben.

So in Ihrem Code über dem Wert von @titles funktioniert nur als einfaches/Einzelauswahlelement (die gleiche wie body zum Beispiel).

I.e. Zusammenfassend und im Allgemeinen sollte "String-basierte Selektor Manipulation" (wie ~"@{title1}, @{title2}") wo möglich vermieden werden, einfach weil in Selections keine Strings und Strings sind keine Selektoren (noch sie automatisch konvertiert, außer in, noch einmal , bestimmte extrem triviale Fälle).

---

Bisher ist die einzigen nicht-hackish Verfahren eine wiederverwendbare Liste der Wähler in weniger zu definieren, ist ein mixin (Mixins kann als „Variablen“ zu einmal in Erwägung gezogen werden, wenn sie eine andere Syntax), die von einem beliebigen Satz legt Regeln in einen Regelsatz mit der genannten Liste als Selektor. Z.B. Für das obige Beispiel wäre es etwa so:

@title1: ~"h1.someclass > a"; 
@title2: ~"h1.otherclass > a"; 

.titles(@rules) { 
    @{title1}, @{title2} {@rules();} 
} 

// usage: 

.titles({ 
    &:after { 
     display: none; 
    } 
}); 

Demo.