SCSS und Sass

In ChatGPT öffnen

Sass ist eine Stylesheet-Sprache, die Variablen, Verschachtelung und Funktionen zu CSS hinzufügt, und SCSS ist ihre CSS-ähnliche Syntax. Die SCSS-Erweiterung wird aktiviert, wenn eine .scss oder .sass Quelle vorhanden ist, kompiliert sie zu CSS und lädt sie als Styles. Eine Klasse bindet an das kompilierte Stylesheet, genau wie sie an ein Skript bindet.

Beispiel

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

Optionen

Die SCSS-Erweiterung leitet ihre Optionen an den Dart Sass-Compiler weiter. Die häufigste ist ein Ladepfad, der es einem Eintrag ermöglicht, @use ein Partial zu verwenden, das sich außerhalb seines eigenen Ordners befindet:

src/main/frontend/bun.config.ts

export const options = {
  'webforj-scss': { loadPaths: ['styles'] }
};

Mit diesem Ladepfad wird @use 'tokens' zu einem Partial unter src/main/frontend/styles. Die Sass-Optionsreferenz listet den Rest auf.