Vai al contenuto
Numio

Convertitore da SCSS a CSS standard — Numio

Compila SCSS (.scss, sintassi con parentesi graffe) in CSS semplice con Dart Sass, quindi aggiunge i prefissi del fornitore con Autoprefixer. Variabili, @mixin/@include, nidificazione e moduli integrati come sass:math vengono risolti in regole CSS semplici.

Ottenere CSS compilato da uno snippet .scss (ad esempio un componente in stile Bootstrap) per incollarlo in un progetto che non ha un passaggio di compilazione Sass.

Scss

CSS

Quando usarlo

  • Ottenere CSS compilato da uno snippet .scss (ad esempio un componente in stile Bootstrap) per incollarlo in un progetto che non ha un passaggio di compilazione Sass.
  • Debug del modo in cui la nidificazione, i selettori & e le funzioni di colore come darken() si espandono prima di confermare le modifiche SCSS.

Come si usa

  1. Incolla SCSS nell'editor Scss o rilascia un file .scss su di esso.
  2. Apri le impostazioni per scegliere i target Autoprefixer: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. All’inizio è attivo solo "defaults".
  3. Copia il risultato del pannello CSS; è semplice CSS che puoi salvare direttamente come file .css.

Ingresso SCSS

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

Dettagli e limiti

La compilazione avviene in un Web Worker del browser: Dart Sass esegue compileString con la sintassi SCSS. Anche Autoprefixer e la formattazione Prettier vengono eseguiti localmente. Il codice non viene caricato su un server.

Ogni input viene compilato come un singolo file autonomo. @use o @import dei tuoi partial produce "Can't find stylesheet to import"; i moduli integrati come @use "sass:math" funzionano.

Se l'input non produce CSS (solo variabili, mixin o funzioni), il risultato è un singolo commento CSS che dice che non è stato generato CSS, piuttosto che un errore.

FAQ

Supporta @use "sass:math" e altri moduli integrati?

Sì. Moduli integrati come sass:math, sass:color e sass:map sono disponibili perché il codice è compilato da Dart Sass. Solo le importazioni dei tuoi file falliscono, poiché non viene inviato altro che il testo incollato.

Il mio SCSS viene inviato a un server?

No. Compilazione, aggiunta dei prefissi e formattazione avvengono localmente nel browser. Il codice SCSS non viene caricato su un server.

Posso usarlo per la sintassi rientrata .sass?

No, questa pagina viene compilata con la sintassi SCSS, quindi il codice basato sul rientro non riesce ad analizzare. Utilizza la pagina Sass to CSS, che invia il flag di sintassi rientrata allo stesso API.

Come posso ottenere i prefissi dei fornitori per i browser meno recenti?

Apri le impostazioni e attiva target come "last 2 versions" oppure "not ie < 11". Le query selezionate vengono passate ad Autoprefixer come elenco dei browser.

Specifiche e riferimenti