Less

Abrir en ChatGPT

Less es un lenguaje de hojas de estilo que añade variables, mixins y anidamiento a CSS. La extensión Less se activa cuando hay una fuente .less presente y la compila a CSS.

Ejemplo

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);
  }
}

Opciones

La extensión Less reenvía sus opciones a Less, que llama para renderizar cada fuente. El nombre del archivo se establece por ti. Establece el resto bajo webforj-less en bun.config.ts:

src/main/frontend/bun.config.ts

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