Less

Ouvrir dans ChatGPT

Less est un langage de feuille de style qui ajoute des variables, des mixins et de l'imbrication au CSS. L'extension Less s'active lorsqu'une source .less est présente et la compile en CSS.

Exemple

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

L'extension Less transmet ses options à Less, qu'elle appelle pour rendre chaque source. Le nom de fichier est défini pour vous. Définissez le reste sous webforj-less dans bun.config.ts :

src/main/frontend/bun.config.ts

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