Less

In ChatGPT öffnen

Less ist eine Stylesheet-Sprache, die Variablen, Mixins und Verschachtelung zu CSS hinzufügt. Die Less-Erweiterung wird aktiviert, wenn eine .less-Quelle vorhanden ist, und kompiliert sie zu CSS.

Beispiel

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

Optionen

Die Less-Erweiterung leitet ihre Optionen an Less weiter, das sie aufruft, um jede Quelle zu rendern. Der Dateiname wird für dich festgelegt. Setze den Rest unter webforj-less in bun.config.ts:

src/main/frontend/bun.config.ts

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