Less

在 ChatGPT 中打开

Less 是一种样式表语言，可以为 CSS 添加变量、混合以及嵌套。当存在 .less 源文件时，Less 扩展会激活并将其编译为 CSS。

示例

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

选项

Less 扩展将其选项转发到 Less，并调用它来渲染每个源文件。文件名由系统为您设置。其余部分请在 bun.config.ts 的 webforj-less 下进行设置：

src/main/frontend/bun.config.ts

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