Gunnar Bittersmann: Auflösung von Variablen in 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 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  1. 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\)
    
    1. @@stylus

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

      Ah, danke.

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

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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

        1. @@stylus

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

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

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Hallo Gunnar Bittersmann,

        Andere Ideen?

        Nur ein bisschen escapen?

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

        Bis demnächst
        Matthias

        --
        Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        1. @@Matthias Apsel

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

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

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. 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.

  3. 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

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

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann