Naar de inhoud
Numio

SCSS naar standaard CSS-converter — Numio

Compileert SCSS (.scss, accolade-syntaxis) naar gewone CSS met Dart Sass en voegt vervolgens leveranciersvoorvoegsels toe met Autoprefixer. Variabelen, @mixin/@include, nesten en ingebouwde modules zoals sass:math worden omgezet in platte CSS-regels.

Het compileren van CSS vanuit een .scss-fragment (bijvoorbeeld een component in Bootstrap-stijl) om in een project te plakken dat geen Sass-buildstap heeft.

Scss

CSS

Wanneer gebruik je dit?

  • Het compileren van CSS vanuit een .scss-fragment (bijvoorbeeld een component in Bootstrap-stijl) om in een project te plakken dat geen Sass-buildstap heeft.
  • Foutopsporing in de manier waarop nesten, &-selectors en kleurfuncties zoals darken() worden uitgebreid voordat SCSS-wijzigingen worden doorgevoerd.

Hoe werkt het

  1. Plak SCSS in de Scss-editor of plaats er een .scss-bestand op.
  2. Open Instellingen om Autoprefixer-doelen te kiezen: standaardwaarden, niet dwz < 11, laatste 2 versies, iOS 7, laatste 3 iOS-versies. Alleen "defaults" is aanvankelijk ingeschakeld.
  3. Kopieer het CSS-paneelresultaat; het is gewoon CSS dat u direct als .css-bestand kunt opslaan.

SCSS-ingang

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

Details en beperkingen

Dart Sass compileert de code lokaal in een Web Worker in je browser met compileString en de scss-syntaxis. Ook Autoprefixer en de Prettier-opmaak werken lokaal. Je code wordt niet geüpload.

Elke invoer wordt gecompileerd als een enkel zelfstandig bestand. @use of @import van uw eigen gedeeltelijke waarden mislukt met "Kan geen stylesheet vinden om te importeren"; ingebouwde modules zoals @use "sass:math" werken.

Als de invoer geen CSS produceert (alleen variabelen, mixins of functies), is het resultaat een enkele CSS-opmerking waarin staat dat er geen CSS is gegenereerd, in plaats van een fout.

FAQ

Ondersteunt het @use "sass:math" en andere ingebouwde modules?

Ja. Ingebouwde modules zoals sass:math, sass:color en sass:map zijn beschikbaar omdat de code is gecompileerd door Dart Sass. Alleen het importeren van uw eigen bestanden mislukt, omdat er alleen de geplakte tekst wordt verzonden.

Wordt mijn SCSS naar een server verzonden?

Nee. De compilatie, het toevoegen van leveranciersprefixen en de opmaak vinden lokaal in je browser plaats. Je SCSS wordt niet naar een conversieserver gestuurd.

Kan ik het gebruiken voor .sass ingesprongen syntaxis?

Nee. Deze pagina compileert SCSS-syntaxis, zodat code op basis van inspringing niet kan worden geparseerd. Gebruik daarvoor de pagina Sass naar CSS; die gebruikt dezelfde lokale compiler met de indented-syntaxis.

Hoe kom ik aan leveranciersvoorvoegsels voor oudere browsers?

Open Instellingen en schakel doelen in zoals "laatste 2 versies" of "niet dwz < 11". De geselecteerde zoekopdrachten worden als browserlijst aan Autoprefixer doorgegeven.

Specificaties en referenties