Przejdź do treści
Numio

Konwerter SCSS na standardowy CSS — Numio

Kompiluje SCSS (.scss, składnia nawiasów klamrowych) do zwykłego CSS za pomocą Dart Sass, a następnie dodaje prefiksy dostawców za pomocą Autoprefixera. Zmienne, @mixin/@include, zagnieżdżanie i wbudowane moduły, takie jak sass:math, są przekształcane w płaskie reguły CSS.

Kompilowanie CSS z fragmentu .scss (na przykład komponentu w stylu Bootstrap) do wklejenia do projektu, który nie ma etapu kompilacji Sass.

Scss

CSS

Kiedy go używać

  • Kompilowanie CSS z fragmentu .scss (na przykład komponentu w stylu Bootstrap) do wklejenia do projektu, który nie ma etapu kompilacji Sass.
  • Debugowanie sposobu, w jaki zagnieżdżanie, selektory & i funkcje kolorów, takie jak darken() rozwijają się przed zatwierdzeniem zmian SCSS.

Jak używać

  1. Wklej SCSS do edytora Scss lub upuść na nim plik .scss.
  2. Otwórz ustawienia i wybierz cele Autoprefixer: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Początkowo włączone jest tylko "defaults".
  3. Skopiuj wynik panelu CSS; to zwykły CSS, który możesz zapisać bezpośrednio jako plik .css.

Wejście 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;
}

Szczegóły i ograniczenia

Kompilacja odbywa się lokalnie w Web Workerze w przeglądarce: Dart Sass wywołuje compileString ze składnią scss. Autoprefixer i formatowanie Prettier również działają lokalnie.

Każde dane wejściowe są kompilowane jako jeden samodzielny plik. @use lub @import własnych plików częściowych powoduje "Can't find stylesheet to import"; wbudowane moduły, np. @use "sass:math", działają.

Jeśli na wejściu nie zostanie wygenerowany CSS (tylko zmienne, miksy lub funkcje), wynikiem będzie pojedynczy komentarz CSS informujący, że nie wygenerowano żadnego CSS, a nie błąd.

FAQ

Czy obsługuje @use „sass:math” i inne wbudowane moduły?

Tak. Wbudowane moduły, np. sass:math, sass:color i sass:map, są dostępne, ponieważ kod kompiluje Dart Sass. Niedostępne są tylko importy własnych plików, gdyż kompilator ma dostęp wyłącznie do wklejonego tekstu.

Czy mój SCSS został wysłany na serwer?

Nie. Kompilacja SCSS, dodawanie prefiksów i formatowanie odbywają się lokalnie w przeglądarce. Moduły są pobierane przy pierwszym użyciu, ale kod wejściowy nie jest wysyłany na serwer.

Czy mogę go używać do składni z wcięciem .sass?

Nie. Ta strona używa składni SCSS, dlatego kod oparty na wcięciach nie zostanie poprawnie przeanalizowany. Użyj narzędzia Sass do CSS, które uruchamia ten sam lokalny kompilator ze składnią indented.

Jak uzyskać prefiksy dostawców dla starszych przeglądarek?

Otwórz ustawienia i włącz cele, np. "last 2 versions" lub "not ie < 11". Wybrane zapytania są przekazywane do Autoprefixer jako lista przeglądarek.

Specyfikacje i referencje