Auflösung von Variablen in Stylus – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Auflösung von Variablen in Stylus Thu, 20 Jun 19 16:21:18 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750823#m1750823 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750823#m1750823 <p>Stylus-Quelltext:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">calc</span><span class="token punctuation">(</span>$f <span class="token operator">+</span> $v<span class="token punctuation">)</span></span></span> </code></pre> <p>ergibt kompiliert:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>$f + $v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>2em + 3vmax<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>In Sass ginge das so:</p> <pre><code class="block language-scss"><span class="token property"><span class="token variable">$f</span></span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$v</span></span><span class="token punctuation">:</span> 3vmax<span class="token punctuation">;</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">#{$f}</span> <span class="token operator">+</span> <span class="token variable">#{$v}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Aber wie geht’s in Stylus?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 16:35:28 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750824#m1750824 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750824#m1750824 <blockquote> <p>Stylus-Quelltext:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">calc</span><span class="token punctuation">(</span>$f <span class="token operator">+</span> $v<span class="token punctuation">)</span></span></span> </code></pre> <p>ergibt kompiliert:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>$f + $v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>2em + 3vmax<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>In Sass ginge das so:</p> <pre><code class="block language-scss"><span class="token property"><span class="token variable">$f</span></span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$v</span></span><span class="token punctuation">:</span> 3vmax<span class="token punctuation">;</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token variable">#{$f}</span> <span class="token operator">+</span> <span class="token variable">#{$v}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Aber wie geht’s in Stylus?</p> </blockquote> <p>Escapen:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> calc\<span class="token punctuation">(</span>$f \<span class="token operator">+</span> $v\<span class="token punctuation">)</span></span> </code></pre> Auflösung von Variablen in Stylus Thu, 20 Jun 19 16:38:51 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750825#m1750825 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750825#m1750825 <blockquote> <p>Aber wie geht’s in Stylus?</p> </blockquote> <p><s>Ein Leerzeichen nach <code>calc</code> scheint zu funktionieren.</s></p> <p><strong>Edit:</strong> Sorry, nicht richtig gelesen. Das ist nicht das Ergebnis, das du wolltest.</p> Auflösung von Variablen in Stylus Thu, 20 Jun 19 16:59:03 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750828#m1750828 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750828#m1750828 <p>Hallo Gunnar,</p> <blockquote> <p>Stylus-Quelltext:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">calc</span><span class="token punctuation">(</span>$f <span class="token operator">+</span> $v<span class="token punctuation">)</span></span></span> </code></pre> <p>ergibt kompiliert:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>$f + $v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Meh. Über die doppelte Klammer würde ich ja vielleicht noch hinwegsehen, aber die Variablen sollen schon aufgelöst werden, d.h. herauskommen soll:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>2em + 3vmax<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Neben escapen kannst du auch String–Formate benutzen:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token string">"calc(%s + %s)"</span> <span class="token operator">%</span> <span class="token punctuation">(</span>$f $v<span class="token punctuation">)</span></span> </code></pre> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Auflösung von Variablen in Stylus Fri, 21 Jun 19 08:53:15 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750872#m1750872 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750872#m1750872 <p>@@Gunnar Bittersmann</p> <p>Was geht:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span><span class="token punctuation">;</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span><span class="token punctuation">;</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">--f</span><span class="token punctuation">:</span> $f</span> <span class="token property-declaration"><span class="token property">--v</span><span class="token punctuation">:</span> $v</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">calc</span><span class="token punctuation">(</span><span class="token func"><span class="token function">var</span><span class="token punctuation">(</span><span class="token operator">-</span>-f<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token func"><span class="token function">var</span><span class="token punctuation">(</span><span class="token operator">-</span>-v<span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span> </code></pre> <p>kompiliert zu:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">--f</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">--v</span><span class="token punctuation">:</span> 3vmax<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--f<span class="token punctuation">)</span> + <span class="token function">var</span><span class="token punctuation">(</span>--v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Da bei mir sowieso <em lang="en">custom properties</em> 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.</p> <p>Aber gibt’s im Allgemeinen eine gute Lösung? Oder sollte ich versuchen, die anderen zu überzeugen, dass Sass der bessere Präprozessor ist?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 19:02:58 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750849#m1750849 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750849#m1750849 <p>@@stylus</p> <blockquote> <p>Escapen: […] <code>calc\($f \+ $v\)</code></p> </blockquote> <p>Ah, danke.</p> <p>Kommt man da durch Probieren drauf oder ist das irgendwo dokumentiert?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 20:31:18 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750857#m1750857 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750857#m1750857 <p>@@stylus</p> <blockquote> <p>Escapen:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> calc\<span class="token punctuation">(</span>$f \<span class="token operator">+</span> $v\<span class="token punctuation">)</span></span> </code></pre> </blockquote> <p>Zu früh gefreut. Das ergibt:</p> <pre><code class="block bad language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> calc <span class="token punctuation">(</span> 2em + 3vmax <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die Leerzeichen in der Klammer sind nicht tragisch; bei <code>calc(</code> darf aber keins dazwischen stehen. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/YoNvxM" rel="noopener noreferrer">Codepen</a></p> <p>Andere Ideen?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 19:06:45 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750852#m1750852 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750852#m1750852 <p>@@Christian Kruse</p> <blockquote> <p>Neben escapen kannst du auch String–Formate benutzen: […] <code>margin: "calc(%s + %s)" % ($f $v)</code></p> </blockquote> <p>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.</p> <p>Jetzt muss ich bloß noch die andere Stelle wiederfinden und auf Escapes umschreiben …</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 22:19:43 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750859#m1750859 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750859#m1750859 <blockquote> <p>Kommt man da durch Probieren drauf oder ist das irgendwo dokumentiert?</p> </blockquote> <p>5 Minuten probieren, kann Stunden Handbuchlesen ersparen…</p> <blockquote> <blockquote> <p>Escapen:</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> calc\<span class="token punctuation">(</span>$f \<span class="token operator">+</span> $v\<span class="token punctuation">)</span></span> </code></pre> </blockquote> <p>Zu früh gefreut. Das ergibt:</p> <pre><code class="block bad language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> calc <span class="token punctuation">(</span> 2em + 3vmax <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die Leerzeichen in der Klammer sind nicht tragisch; bei <code>calc(</code> darf aber keins dazwischen stehen. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/YoNvxM" rel="noopener noreferrer">Codepen</a></p> <p>Andere Ideen?</p> </blockquote> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token string">"calc(%s + %s)"</span> <span class="token operator">%</span> <span class="token punctuation">(</span>$f $v<span class="token punctuation">)</span></span> </code></pre> <p>via <a href="https://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc" rel="noopener noreferrer">https://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc</a></p> Auflösung von Variablen in Stylus Fri, 21 Jun 19 05:32:38 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750864#m1750864 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750864#m1750864 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Andere Ideen?</p> </blockquote> <p>Nur ein bisschen escapen?</p> <pre><code class="block language-stylus"><span class="token variable-declaration"><span class="token variable">$f</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">em</span></span> <span class="token variable-declaration"><span class="token variable">$v</span> <span class="token operator">=</span> <span class="token number">3</span><span class="token unit">vmax</span></span> <span class="token selector">body</span> <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">calc</span><span class="token punctuation">(</span>$f \<span class="token operator">+</span> $v<span class="token punctuation">)</span></span></span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> Auflösung von Variablen in Stylus Thu, 20 Jun 19 22:26:13 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750860#m1750860 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750860#m1750860 <p>@@stylus</p> <blockquote> <p><code>margin: "calc(%s + %s)" % ($f $v)</code></p> </blockquote> <p>Ja, das sagte CK auch schon. Ist aber Kacke.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Auflösung von Variablen in Stylus Fri, 21 Jun 19 07:16:22 Z https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750868#m1750868 https://forum.selfhtml.org/self/2019/jun/20/aufloesung-von-variablen-in-stylus/1750868#m1750868 <p>@@Matthias Apsel</p> <blockquote> <p>Nur ein bisschen escapen? […] <code>margin: calc($f \+ $v)</code></p> </blockquote> <p>Schnell im verlinkten Codepen überprüft: Nö, die Variablen werden nicht aufgelöst.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>