SCSS en Sass

Openen in ChatGPT

Sass is een stylesheet-taal die variabelen, nesting en functies aan CSS toevoegt, en SCSS is de CSS-achtige syntaxis ervan. De SCSS-extensie wordt geactiveerd wanneer er een .scss of .sass bron aanwezig is, compileert het naar CSS en laad het als stijlen. Een klasse bindt aan de gecompileerde stylesheet op dezelfde manier als het bindt aan een script.

Voorbeeld

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

Opties

De SCSS-extensie doorgeeft zijn opties aan de Dart Sass-compiler. De meest voorkomende is een laadpad, waarmee een invoer @use een partial kan gebruiken die zich buiten zijn eigen map bevindt:

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

Met dat laadpad, lost @use 'tokens' een partial op onder src/main/frontend/styles. De Sass-optiesreferentie lijst de rest op.

Voorbeeld​

Opties​

Voorbeeld

Opties