Vai al contenuto
Numio

Trasformatore Sass standard CSS — Numio

Compila la sintassi con rientro Sass (.sass, senza parentesi graffe o punto e virgola) in CSS semplice con Dart Sass, quindi esegue Autoprefixer per le destinazioni del browser scelte. Variabili, mixin (=nome / +nome) e annidamento vengono risolti in regole CSS piatte.

Controllare in cosa viene compilato un file .sass con sintassi rientrata da un vecchio progetto Rails o in stile Bulma senza impostare una toolchain Sass.

Sass

CSS

Quando usarlo

  • Controllare in cosa viene compilato un file .sass con sintassi rientrata da un vecchio progetto Rails o in stile Bulma senza impostare una toolchain Sass.
  • Produzione di un semplice CSS da uno snippet .sass da incollare in un CMS, modello di posta elettronica o codepen che non accetta Sass.

Come si usa

  1. Incolla Sass nell'editor Sass o rilascia un file .sass 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 sfacciato

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

Dettagli e limiti

La compilazione avviene in un Web Worker del browser: Dart Sass esegue compileString con la sintassi a rientri. 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.

I prefissi del fornitore dipendono dai target selezionati. Nell'esempio, la selezione dell'utente ottiene i prefissi -webkit- e -moz- nella query "defaults".

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

Qual è la differenza tra Sass e SCSS qui?

Questa pagina prevede la sintassi rientrata: nidificazione per rientro, senza parentesi graffe o punto e virgola, =mixin e +include abbreviazioni. Per il codice in stile parentesi graffa utilizzare la pagina da SCSS a CSS; entrambi chiamano lo stesso API con un flag di sintassi diverso.

Posso importare partial come _variables.sass?

No. Il compilatore locale elabora solo il testo incollato, senza accesso al file system o percorsi di caricamento, quindi gli import dei tuoi file non funzionano. Incolla il contenuto del partial prima del codice che lo usa.

Cosa succede se il mio file contiene solo variabili o mixin?

Sass non genera CSS per le dichiarazioni mai usate, quindi la pagina mostra il commento /* No CSS generated: ... */. Aggiungi una regola che usi le variabili o includa il mixin per ottenere un risultato.

L'output è minimizzato?

No. CSS è espanso e formattato con Prettier. I selettori nidificati come &:hover vengono scritti come regole separate come .button:hover.

Specifiche e riferimenti