Auflösung von Variablen in Stylus

[Gunnar Bittersmann]

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]

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\)

[Gunnar Bittersmann]

@@stylus

Escapen: […] calc\($f \+ $v\)

Ah, danke.

Kommt man da durch Probieren drauf oder ist das irgendwo dokumentiert?

LLAP 🖖

[Gunnar Bittersmann]

@@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 🖖

[stylus]

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. ☞ Codepen

Andere 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

[Gunnar Bittersmann]

@@stylus

margin: "calc(%s + %s)" % ($f $v)

Ja, das sagte CK auch schon. Ist aber Kacke.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Andere Ideen?

Nur ein bisschen escapen?

$f = 2em
$v = 3vmax
 
body
	margin: calc($f \+ $v)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nur ein bisschen escapen? […] margin: calc($f \+ $v)

Schnell im verlinkten Codepen überprüft: Nö, die Variablen werden nicht aufgelöst.

LLAP 🖖

[1unitedpower]

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.

[Christian Kruse]

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

[Gunnar Bittersmann]

@@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]

@@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 🖖