Less

Openen in ChatGPT

Less is a stylesheet language that adds variables, mixins, and nesting to CSS. The Less extension activates when a .less source is present and compiles it to CSS.

Example

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

Options

The Less extension forwards its options to Less, which it calls to render each source. The filename is set for you. Set the rest under webforj-less in bun.config.ts:

src/main/frontend/bun.config.ts

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