Przejdź do treści
Numio

Konwerter Sass na standardowy CSS — Numio

Kompiluje składnię z wcięciem Sass (.sass, bez nawiasów klamrowych i średników) do zwykłej składni CSS za pomocą Dart Sass, a następnie uruchamia Autoprefixer dla wybranych docelowych przeglądarek. Zmienne, miksy (=nazwa / +nazwa) i zagnieżdżanie są przekształcane w płaskie reguły CSS.

Sprawdzanie, do czego kompiluje się plik .sass o wciętej składni ze starszego projektu w stylu Rails lub Bulma bez konfigurowania zestawu narzędzi Sass.

Sass

CSS

Kiedy go używać

  • Sprawdzanie, do czego kompiluje się plik .sass o wciętej składni ze starszego projektu w stylu Rails lub Bulma bez konfigurowania zestawu narzędzi Sass.
  • Tworzenie zwykłego CSS z fragmentu .sass do wklejenia do CMS, szablonu wiadomości e-mail lub codepen, który nie akceptuje Sass.

Jak używać

  1. Wklej Sass do edytora Sass lub upuść na nim plik .sass.
  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.

Sassowe wejście

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

Szczegóły i ograniczenia

Kompilacja odbywa się lokalnie w Web Workerze w przeglądarce: Dart Sass wywołuje compileString ze składnią indented. 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ą.

Prefiksy dostawców zależą od wybranych celów. W przykładzie user-select otrzymuje prefiksy -webkit- i -moz- dla zapytania "defaults".

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

Jaka jest tutaj różnica między Sassem a SCSS?

Ta strona oczekuje składni z wcięciami: zagnieżdżenia przez wcięcie, bez klamer i średników, ze skrótami =mixin i +include. Dla składni z klamrami użyj narzędzia SCSS do CSS; oba używają tego samego lokalnego kompilatora z inną opcją składni.

Czy mogę importować części, takie jak _variables.sass?

Nie. Kompilator przetwarza tylko wklejony tekst, bez dostępu do lokalnego systemu plików ani ścieżek wyszukiwania, dlatego importy własnych plików nie działają. Wklej zawartość pliku częściowego przed kodem, który go używa.

Co się stanie, jeśli mój plik zawiera tylko zmienne lub miksy?

Sass nie generuje CSS dla deklaracji, które nigdy nie są używane, więc na stronie pojawia się komentarz /* Nie wygenerowano CSS: ... */. Dodaj regułę, która używa zmiennych lub zawiera miks, aby uzyskać wynik.

Czy dane wyjściowe są zminimalizowane?

Nie. CSS jest rozwijany i sformatowany w programie Prettier. Zagnieżdżone selektory, takie jak &:hover, są zapisywane jako osobne reguły, takie jak .button:hover.

Specyfikacje i referencje