Versions-Historie des Beitrags „Wert aus Attribut im CSS verwendbar? Also calc() und attr() kombinierbar?“

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

bearbeitet von

Gunnar Bittersmann 01.06.2017 02:36

@@MudGuard

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

_x_ Selektoren ja, handausgerechnete Werte nein.
:

~~~css
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:

~~~scss
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:

~~~scss
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?
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

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

bearbeitet von

Gunnar Bittersmann 01.06.2017 02:43

@@MudGuard > Schade, dann muß ich halt x Selektoren mit handausgerechneten Werten bauen _x_ Selektoren ja, handausgerechnete Werte nein. ~~~css 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 } ~~~ LLAP 🖖 PS: Kann man den Syntaxhighlighter updaten oder gegen einen funktionierenden austauschen? -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)