SCSS and Sass

Avaa ChatGPT:ssä

Sass on tyyliarkkikieli, joka lisää muuttujia, sisäkkäisyyksiä ja funktioita CSS:ään, ja SCSS on sen CSS:ään perustuva syntaksi. SCSS-laajennus aktivoituu, kun '.scss' tai '.sass' lähde on läsnä, kääntää sen CSS:ksi ja lataa sen tyyleiksi. Luokka sitoutuu kääntäytyneeseen tyyliarkkiin samalla tavalla kuin se sitoutuu skriptiin.

Esimerkki

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

Vaihtoehdot

SCSS-laajennus välittää vaihtoehtonsa Dart Sass -kääntäjälle. Yleisimmät vaihtoehdot ovat latauspolku, joka sallii sisäänkäynnin @use käyttää osaa, joka sijaitsee sen omasta kansiosta ulkopuolella:

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

Tuolla latauspolulla @use 'tokens' ratkaisee osan src/main/frontend/styles alla. Sass-vaihtoehtojen viittaus luettelee loput.

Esimerkki​

Vaihtoehdot​

Esimerkki

Vaihtoehdot