SCSS and Sass

Ouvrir dans ChatGPT

Sass est un langage de feuille de style qui ajoute des variables, de l'imbrication et des fonctions au CSS, et SCSS est sa syntaxe semblable à CSS. L'extension SCSS s'active lorsqu'une source .scss ou .sass est présente, la compile en CSS et la charge en tant que styles. Une classe se lie à la feuille de style compilée de la même manière qu'elle se lie à un script.

Exemple

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

L'extension SCSS transmet ses options au compilateur Dart Sass. La plus courante est un chemin de chargement, qui permet à une entrée @use d'accéder à un partiel qui se trouve en dehors de son propre dossier :

src/main/frontend/bun.config.ts

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

Avec ce chemin de chargement, @use 'tokens' résout un partiel sous src/main/frontend/styles. La référence des options Sass liste le reste.