Auflösung von Variablen in Stylus
Gunnar Bittersmann
- css
- stylus
Stylus-Quelltext:
$f = 2em
$v = 3vmax
body
margin: calc($f + $v)
ergibt kompiliert:
body {
margin: calc(($f + $v));
}
Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:
body {
margin: calc(2em + 3vmax);
}
In Sass ginge das so:
$f: 2em;
$v: 3vmax;
body {
margin: calc(#{$f} + #{$v});
}
Aber wie geht’s in Stylus?
LLAP 🖖
Stylus-Quelltext:
$f = 2em $v = 3vmax body margin: calc($f + $v)
ergibt kompiliert:
body { margin: calc(($f + $v)); }
Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:
body { margin: calc(2em + 3vmax); }
In Sass ginge das so:
$f: 2em; $v: 3vmax; body { margin: calc(#{$f} + #{$v}); }
Aber wie geht’s in Stylus?
Escapen:
$f = 2em
$v = 3vmax
body
margin: calc\($f \+ $v\)
@@stylus
Escapen: […]
calc\($f \+ $v\)
Ah, danke.
Kommt man da durch Probieren drauf oder ist das irgendwo dokumentiert?
LLAP 🖖
@@stylus
Escapen:
$f = 2em $v = 3vmax body margin: calc\($f \+ $v\)
Zu früh gefreut. 😠 Das ergibt:
body {
margin: calc ( 2em + 3vmax );
}
Die Leerzeichen in der Klammer sind nicht tragisch; bei calc(
darf aber keins dazwischen stehen. ☞ Codepen
Andere Ideen?
LLAP 🖖
Kommt man da durch Probieren drauf oder ist das irgendwo dokumentiert?
5 Minuten probieren, kann Stunden Handbuchlesen ersparen…
Escapen:
$f = 2em $v = 3vmax body margin: calc\($f \+ $v\)
Zu früh gefreut. 😠 Das ergibt:
body { margin: calc ( 2em + 3vmax ); }
Die Leerzeichen in der Klammer sind nicht tragisch; bei
calc(
darf aber keins dazwischen stehen. ☞ CodepenAndere Ideen?
$f = 2em
$v = 3vmax
body
margin: "calc(%s + %s)" % ($f $v)
via https://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc
@@stylus
margin: "calc(%s + %s)" % ($f $v)
Ja, das sagte CK auch schon. Ist aber Kacke.
LLAP 🖖
Hallo Gunnar Bittersmann,
Andere Ideen?
Nur ein bisschen escapen?
$f = 2em
$v = 3vmax
body
margin: calc($f \+ $v)
Bis demnächst
Matthias
@@Matthias Apsel
Nur ein bisschen escapen? […]
margin: calc($f \+ $v)
Schnell im verlinkten Codepen überprüft: Nö, die Variablen werden nicht aufgelöst.
LLAP 🖖
Aber wie geht’s in Stylus?
Ein Leerzeichen nach calc
scheint zu funktionieren.
Edit: Sorry, nicht richtig gelesen. Das ist nicht das Ergebnis, das du wolltest.
Hallo Gunnar,
Stylus-Quelltext:
$f = 2em $v = 3vmax body margin: calc($f + $v)
ergibt kompiliert:
body { margin: calc(($f + $v)); }
Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:
body { margin: calc(2em + 3vmax); }
Neben escapen kannst du auch String–Formate benutzen:
$f = 2em
$v = 3vmax
body
margin: "calc(%s + %s)" % ($f $v)
LG,
CK
@@Christian Kruse
Neben escapen kannst du auch String–Formate benutzen: […]
margin: "calc(%s + %s)" % ($f $v)
Ja, hab ich in anderer Stelle im Code auch schon mal gemacht. Lesbarer Code geht anders. Wenn man solche Verrenkungen machen muss, ist mal wohl ohne Präprozessor besser dran als mit.
Jetzt muss ich bloß noch die andere Stelle wiederfinden und auf Escapes umschreiben …
LLAP 🖖
@@Gunnar Bittersmann
Was geht:
$f = 2em;
$v = 3vmax;
body
--f: $f
--v: $v
margin: calc(var(--f) + var(--v))
kompiliert zu:
body {
--f: 2em;
--v: 3vmax;
margin: calc(var(--f) + var(--v));
}
Da bei mir sowieso custom properties im Spiel sind (das Beispiel ist aufs Kernproblem reduziert) und ein Fallback für veraltete Browser bedacht werden muss, ist das in dem Fall meine temporäre Lösung.
Aber gibt’s im Allgemeinen eine gute Lösung? Oder sollte ich versuchen, die anderen zu überzeugen, dass Sass der bessere Präprozessor ist?
LLAP 🖖