SCSS and Sass

在 ChatGPT 中打开

Sass is a stylesheet language that adds variables, nesting, and functions to CSS, and SCSS is its CSS-like syntax. The SCSS extension activates when a .scss or .sass source is present, compiles it to CSS, and loads it as styles. A class binds to the compiled stylesheet the same way it binds to a script.

Example

scss/box.scss
@use 'tokens' as t;

.box {
  padding: 1rem;
  border: 2px solid t.$accent;
}

ScssView.java
@Route("/scss")
@BundleEntry("scss/box.scss")
public class ScssView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public ScssView() {
    Div box = new Div().addClassName("box");
    self.add(box);
  }
}

Options

The SCSS extension forwards its options to the Dart Sass compiler. The most common is a load path, which lets an entry @use a partial that lives outside its own folder:

src/main/frontend/bun.config.ts
export const options = {
  'webforj-scss': { loadPaths: ['styles'] }
};

With that load path, @use 'tokens' resolves a partial under src/main/frontend/styles. The Sass options reference lists the rest.

Example​

Options​

Example

Options