Konwerter CSS do SCSS
Konwertuj kod CSS do SCSS z zagnieżdżaniem, zmiennymi i mixinami. Darmowe narzędzie działające w przeglądarce.
Wejściowy CSS
Skonwertowany SCSS
Przykłady CSS do SCSS
Płaskie selektory CSS są konwertowane do zagnieżdżonego SCSS. Przykład:
Zagnieżdżona struktura z płaskiego CSS
Wejściowy CSS:
Skonwertowany SCSS:
Użyj przycisku Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest CSS do SCSS?
SCSS dodaje zmienne, zagnieżdżanie i mixiny do CSS. Konwersja zwykłego CSS do SCSS restrukturyzuje go z zagnieżdżaniem i przygotowuje do funkcji SCSS. To narzędzie analizuje Twój CSS i produkuje strukturę w stylu SCSS. Specyfikacje W3C CSS definiują źródło; Sass definiuje wyjście.
Konwersja odbywa się całkowicie w Twojej przeglądarce. Nic nie jest wysyłane na serwer. Wynik jest prawidłowym SCSS. W odwrotnym kierunku (SCSS do CSS) użyj SCSS do CSS. Dla Less użyj CSS do Less.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj swój CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS pokaże błąd.
Sprawdź wynik SCSS
Prawy panel pokazuje skonwertowany SCSS. Selektory mogą być zagnieżdżone tam, gdzie struktura na to pozwala. Możesz ręcznie dodać zmienne i mixiny po konwersji.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Skompiluj SCSS za pomocą SCSS do CSS, aby zweryfikować. Aby najpierw sformatować CSS, użyj Formatera CSS.
Kiedy CSS do SCSS jest przydatny
Gdy migrujesz projekt ze zwykłego CSS do SCSS, lub gdy masz CSS z eksportu projektu i chcesz go zintegrować z bazą kodu opartą na SCSS (np. Bootstrap 4+, Foundation), ta konwersja zapewnia punkt startowy. Narzędzia do budowania takie jak webpack i Vite kompilują SCSS. Wynik daje Ci zagnieżdżoną strukturę, którą możesz dopracować zmiennymi i mixinami.
Narzędzia projektowe takie jak Figma często eksportują zwykły CSS. Konwertując go tutaj do SCSS, możesz dodać go do struktury opartej na komponentach. Dla Less użyj CSS do Less. Dla prefiksów dostawców użyj Prefiksera CSS.
Często zadawane pytania
Czy dodaje zmienne lub mixiny?
Konwerter skupia się na strukturze (zagnieżdżaniu). Nie wyodrębnia automatycznie powtarzających się wartości do zmiennych. Dodaj zmienne i mixiny ręcznie zgodnie z potrzebami.
Czy moje dane są prywatne?
Tak. Konwersja odbywa się całkowicie w Twojej przeglądarce. Żadne dane nie są wysyłane na serwer.
Jak działa zagnieżdżanie?
Narzędzie wnioskuje zagnieżdżanie z relacji między selektorami. Złożone selektory mogą pozostać płaskie. Sprawdź i dostosuj według potrzeb.
CSS do SCSS vs CSS do Less?
Oba produkują składnię preprocesora. SCSS jest szerzej stosowany (Bootstrap 4+, wiele frameworków). Less jest używany przez Bootstrap 3, Ant Design. Wybierz na podstawie swojego stosu technologicznego.
Czy mogę skompilować wynik?
Tak. Wklej SCSS do SCSS do CSS, aby skompilować i zweryfikować. Wynik powinien odpowiadać strukturze oryginalnego CSS.
Powiązane narzędzia
Dla Sass/SCSS, odwiedź sass-lang.com i dokumentację Sass. W3C CSS i MDN CSS definiują format źródłowy. Zobacz także Bootstrap, Figma, webpack, Vite.