<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>I've been using LESS for ages in combination with FX. I adapted
this project: <a class="moz-txt-link-freetext" href="https://github.com/i-net-software/jlessc">https://github.com/i-net-software/jlessc</a></p>
<p>In FX I use it with this helper class:</p>
<p><a class="moz-txt-link-freetext" href="https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java">https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java</a></p>
<p>Then to use a stylesheet with a control, you do something like
this:</p>
<p><span style="background-color:#ffffff;padding:0px 0px 0px 2px;"><span
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><span
style="color:#000000;"></span><span
style="color:#0000a0;font-weight:bold;"> final</span><span
style="color:#000000;"> String </span><span
style="color:#0000c0;">CLOCK_STYLES_URL</span><span
style="color:#000000;"> = LessLoader.</span><span
style="color:#000000;background-color:#d4d4d4;font-style:italic;">compile</span><span
style="color:#000000;">(RootNodeFactory.</span><span
style="color:#0000a0;font-weight:bold;">class</span><span
style="color:#000000;">, </span><span style="color:#2a00ff;">"clock-pane.less"</span><span
style="color:#000000;">)</span></span></span></p>
<p>Where "RootNodeFactory.class" is just a reference class as my
.less files are located in the same package as the controls.</p>
<p>The resulting URL can then simply be set on a control or scene:</p>
<p><span style="background-color:#ffffff;padding:0px 0px 0px 2px;"><span
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><span
style="color:#000000;"> clockPane.getStylesheets().add(</span><span
style="color:#0000c0;background-color:#d4d4d4;">CLOCK_STYLES_URL</span><span
style="color:#000000;">);</span></span></span></p>
<p>This allows me to use all kinds of handy features from LESS.
Here is the clock-pane.less file for example:</p>
<div style="background-color:#ffffff;padding:0px 0px 0px 2px;">
<div
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><p
style="margin:0;"><span
style="color:#800000;background-color:#d4d4d4;">@import</span><span
style="background-color:#d4d4d4;"> </span><span
style="color:#a31515;background-color:#d4d4d4;">"hs/mediasystem/runner/properties.less"</span>;</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.clock-pane</span></p><p
style="margin:0;">{</p><p style="margin:0;"> -<span
style="color:#ff0000;">fx</span>-<span style="color:#800000;">alignment: bottom-right</span>;</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">padding</span>: <span
style="color:#09885a;">5</span>;</p><p style="margin:0;">
</p><p style="margin:0;"> <span style="color:#ff0000;">.clock-box</span></p><p
style="margin:0;"><span style="color:#800000;"> </span>{</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">padding</span>: <span
style="color:#09885a;">5</span> <span style="color:#09885a;">15</span> <span
style="color:#09885a;">5</span> <span style="color:#09885a;">15</span>;</p><p
style="margin:0;"> -<span style="color:#ff0000;">fx</span>-<span
style="color:#800000;">alignment: center</span>;</p><p
style="margin:0;">
</p><p style="margin:0;"> <span style="color:#ff0000;">.clock</span></p><p
style="margin:0;"><span style="color:#800000;"> </span>{</p><p
style="margin:0;"> <span style="color:#ff0000;">.style-p1-extra-light</span>;</p><p
style="margin:0;"> }</p><p style="margin:0;">
</p><p style="margin:0;"> <span style="color:#ff0000;">.date</span></p><p
style="margin:0;"><span style="color:#800000;"> </span>{</p><p
style="margin:0;"> <span style="color:#ff0000;">.style-p3</span>;</p><p
style="margin:0;"> }</p><p style="margin:0;"> }</p><p
style="margin:0;">}</p></div>
</div>
<p></p>
<p>As you can see, it uses imports, style nesting and references to
groups of other styles (like ".style-p3"). In properties.less we
find many custom variables, like:</p>
<div style="background-color:#ffffff;padding:0px 0px 0px 2px;">
<div
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><p
style="margin:0;"><span
style="color:#001080;background-color:#f0d8a8;">@</span><span
style="color:#0451a5;background-color:#f0d8a8;">tinted-glass</span>: <span
style="color:#0451a5;">fade</span>(<span style="color:#001080;">@</span><span
style="color:#0451a5;">theme-primary</span>, <span
style="color:#09885a;">60%</span>);</p><p style="margin:0;"><span
style="color:#001080;">@</span><span style="color:#0451a5;">glass-color</span>: <span
style="color:#0451a5;">rgba</span>(<span style="color:#09885a;">0</span>, <span
style="color:#09885a;">0</span>, <span style="color:#09885a;">0</span>, <span
style="color:#09885a;">0.6</span>);</p><p style="margin:0;"><span
style="color:#001080;">@</span><span style="color:#0451a5;">shape-disc</span>: <span
style="color:#a31515;">"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"</span>;</p><p
style="margin:0;"><span style="color:#001080;">@</span><span
style="color:#0451a5;">text-primary</span>: <span
style="color:#0451a5;">lighten</span>(<span style="color:#001080;">@</span><span
style="color:#0451a5;">theme-primary</span>, <span
style="color:#09885a;">5%</span>, <span style="color:#0000ff;">relative</span>);</p><p
style="margin:0;">
</p><p style="margin:0;">I'm probably only scratching the surface of what you can do with LESS, as I'm hardly a CSS designer :)</p><p
style="margin:0;">
</p><p style="margin:0;">The LessLoader class I wrote has one more handy feature; it allows suffixes on your CSS files to allow for </p><p
style="margin:0;">customization per platform. I use this to select appropriate fonts per platform (as their names can </p><p
style="margin:0;">vary apparently!). See here the Windows file. The Linux variant has slightly different font family names</p><p
style="margin:0;">but map to the same LESS variables so I don't need to fix this everywhere.
</p><p style="margin:0;">
</p><div style="background-color:#ffffff;padding:0px 0px 0px 2px;"><div
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><p
style="margin:0;"><span style="color:#008000;">/*</span></p><p
style="margin:0;"><span style="color:#008000;"> * The Noto Sans font supports many variations. To get the correct variation</span></p><p
style="margin:0;"><span style="color:#008000;"> * in JavaFX, select them as follows:</span></p><p
style="margin:0;"><span style="color:#008000;"> * </span></p><p
style="margin:0;"><span style="color:#008000;"> * - Black = Noto Sans Blk</span></p><p
style="margin:0;"><span style="color:#008000;"> * - Bold = Noto Sans + font-weight: bold</span></p><p
style="margin:0;"><span style="color:#008000;"> * - Semi Bold = Noto Sans SemBd</span></p><p
style="margin:0;"><span style="color:#008000;"> * - Medium = Noto Sans Med</span></p><p
style="margin:0;"><span style="color:#008000;"> * - Regular = Noto Sans + font-weight: normal</span></p><p
style="margin:0;"><span style="color:#008000;"> * - Light = Noto Sans Light</span></p><p
style="margin:0;"><span style="color:#008000;"> *</span></p><p
style="margin:0;"><span style="color:#008000;"> * Note that these names are for Windows. Other platforms can use</span></p><p
style="margin:0;"><span style="color:#008000;"> * slightly different names.</span></p><p
style="margin:0;"><span style="color:#008000;"> */</span></p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.light</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans Light"</span>;</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">normal</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.regular</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans"</span>;</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">normal</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.medium</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans Med"</span>;</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">bold</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.semi-bold</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans SemBd"</span>;</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">bold</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.bold</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans"</span>;</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">bold</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;"><span style="color:#ff0000;">.black</span><span
style="color:#800000;"> </span>{</p><p style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-family</span>: <span
style="color:#a31515;">"Noto Sans Blk"</span>;</p><p
style="margin:0;"> <span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">fx</span><span
style="text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">-</span><span
style="color:#ff0000;text-decoration:underline;text-decoration-color:#f4c82d;text-decoration-style:wavy;">font-weight</span>: <span
style="color:#0451a5;">bold</span>;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p></div></div><p style="margin:0;"></p><p style="margin:0;">
</p><p style="margin:0;">--John
</p></div>
</div>
<p></p>
<p><br>
</p>
<div class="moz-cite-prefix">On 03/12/2024 01:08, Michael Strauß
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:CAJEpuXS+H9fvaVkZW0mdEniJ4wrnEvnRKx84DD-6qLFCB=kB1g@mail.gmail.com">
<blockquote type="cite">
<pre class="moz-quote-pre" wrap="">I wish there was a simpler way to introduce variables - I think the variables might be a better solution from the stylesheet maintainability point of view, and to help with supporting light/dark, compact/roomy variants and simple things like updating the base font size. Doing a different CSS parser is definitely a much larger project than we can afford, probably. On the other hand, if it enables programmatic creation of style sheets...
</pre>
</blockquote>
<pre class="moz-quote-pre" wrap="">
Custom variables would undoubtedly be a great feature. This is
orthogonal to media queries, though: at some point, even when using
custom variables, you have to ask "the medium" about things like the
color scheme or user preferences.
</pre>
</blockquote>
</body>
</html>