Sass Funktion zum Targeting dynamischer Klassen

Question

Ich habe ein Problem, das auf eine Klasse in Sass abzielt, die in allen Elementen fast gleich ist, aber nur den letzten Teil ändert und ich bin mir nicht sicher, wie es geht.

ist die Klasse, auf Benutzer-ID basiert wie unten:

<div class"user_143"></div> 
<div class"user_341"></div> 
............ 

I Stile für alle Klassen erstellen möchten, die

Zum Beispiel in einem Vielfachen von 10 + 1 oder 2 usw. enden alle Klassen Anding in 1 bekommen eine backgound-color alle in 2 bekommen eine andere backgound-color

Ist das möglich zu erreichen?

Answer 1

Eine mögliche Lösung ist den Attributselektor zu verwenden, wobei im folgenden Fall ist es, alle Elemente mit einer Klasse richtet, die mit user beginnt und endet mit einer Reihe

Wenn es nur die user Klassen ist, die mit endet eine Zahl ist, fallen der erste Selektor [class^="user"]

div[class^="user"][class$="1"] { 
 
    color: red; 
 
} 
 
div[class^="user"][class$="3"] { 
 
    color: blue; 
 
}

<div class="user_143">Number 3</div> 
 
<div class="user_341">Number 1</div>