Naar de inhoud
Numio

Sass naar standaard CSS-transformator — Numio

Compileert de ingesprongen syntaxis van Sass (.sass, zonder accolades of puntkomma's) naar gewone CSS met Dart Sass en voert vervolgens Autoprefixer uit voor de browserdoelen die u kiest. Variabelen, mixins (=naam / +naam) en nesten worden omgezet in platte CSS-regels.

Controleren waarnaar een .sass-bestand met ingesprongen syntaxis van een ouder project in Rails- of Bulma-stijl wordt gecompileerd zonder een Sass-toolchain op te zetten.

Sass

CSS

Wanneer gebruik je dit?

  • Controleren waarnaar een .sass-bestand met ingesprongen syntaxis van een ouder project in Rails- of Bulma-stijl wordt gecompileerd zonder een Sass-toolchain op te zetten.
  • Het produceren van gewone CSS vanuit een .sass-fragment om te plakken in een CMS, e-mailsjabloon of codepen die Sass niet accepteert.

Hoe werkt het

  1. Plak Sass in de Sass-editor of plaats er een .sass-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.

Sass-invoer

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

Details en beperkingen

Dart Sass compileert de code lokaal in een Web Worker in je browser met compileString en de indented-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.

Leveranciersvoorvoegsels zijn afhankelijk van de geselecteerde doelen. In het voorbeeld krijgt user-select de voorvoegsels -webkit- en -moz- onder de "defaults" -query.

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

Wat is hier het verschil tussen Sass en SCSS?

Deze pagina verwacht de ingesprongen syntaxis: nesting via inspringing, geen accolades of puntkomma’s en de verkorte notaties =mixin en +include. Gebruik voor code met accolades de pagina SCSS naar CSS; beide gebruiken dezelfde lokale compiler met een andere syntaxisinstelling.

Kan ik gedeeltelijke waarden zoals _variables.sass importeren?

Nee. Alleen de geplakte tekst wordt gecompileerd, zonder toegang tot je bestandssysteem of zoekpaden. Imports van je eigen bestanden mislukken daarom. Plak de inhoud van het deelbestand boven de code die deze gebruikt.

Wat gebeurt er als mijn bestand alleen variabelen of mixins bevat?

Sass zendt geen CSS uit voor declaraties die nooit worden gebruikt, dus de pagina toont het commentaar /* Geen CSS gegenereerd: ... */. Voeg een regel toe die de variabelen gebruikt of de mix bevat om uitvoer te krijgen.

Is de output verkleind?

Nee. De CSS is uitgebreid en geformatteerd met Prettier. Geneste selectors zoals &:hover worden uitgeschreven als afzonderlijke regels, zoals .button:hover.

Specificaties en referenties