Less

Openen in ChatGPT

Less is een stylesheettaal die variabelen, mixins en nesting aan CSS toevoegt. De Less-extensie wordt geactiveerd wanneer een .less-bron aanwezig is en compileert deze naar CSS.

Voorbeeld

less/box.less

@accent: #2e9e6b;

.box {
  padding: 1rem;
  border: 2px solid @accent;
}

LessView.java

@Route("/less")
@BundleEntry("less/box.less")
public class LessView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public LessView() {
    Div box = new Div().addClassName("box");
    self.add(box);
  }
}

Opties

De Less-extensie forwarded zijn opties naar Less, die het aanroept om elke bron weer te geven. De bestandsnaam wordt voor je ingesteld. Stel de rest in onder webforj-less in bun.config.ts:

src/main/frontend/bun.config.ts

export const options = {
  'webforj-less': { /* Less opties */ }
};