Wert aus Attribut im CSS verwendbar? Also calc() und attr() kombinierbar?

[Gunnar Bittersmann]

@@MudGuard

Schade, dann muß ich halt x Selektoren mit handausgerechneten Werten bauen

x Selektoren ja, handausgerechnete Werte nein:

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }
span[data-priority="4"] { --data-priority: 4 }
span[data-priority="5"] { --data-priority: 5 }
span[data-priority="6"] { --data-priority: 6 }
span[data-priority="7"] { --data-priority: 7 }

Und das mit den x Selektoren kann man einem Präprozessor überlassen:

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

@for $i from 1 through 7
{
	span[data-priority="#{$i}"] { --data-priority: $i }
}

Dann kann man natürlich auch gleich die Berechnung dem Präprozessor überlassen:

span[data-priority]
{
	border-style: solid; 
	border-color: red;
}

@for $i from 1 through 7
{
	span[data-priority="#{$i}"] { border-width: $i  * 2px }
}

LLAP 🖖

PS: Kann man den Syntaxhighlighter updaten oder gegen einen funktionierenden austauschen?