Přejít k obsahu

Formátovač SCSS

Formátujte šablony stylů Sass SCSS pomocí tohoto formátovače SCSS. Vložte SCSS a nástroj přehledně uspořádá vnořená pravidla, proměnné, mixiny, include, nadřazené selektory a řídicí direktivy s odsazením o dvě mezery, jedním deklarovaným pravidlem na řádek a mezerou za dvojtečkami vlastností a středníky tam, kde chybí. Interpolace a komentáře zůstanou zachovány, takže vývojáři frontendu mohou upravit partials a úryvky bez jejich kompilace.

Obnovit

Často kladené otázky

Jak funguje formátovač SCSS?

Čte šablonu stylů jako posloupnost tokenů, například složených závorek, středníků, dvojteček, řetězců a komentářů, a podle nich znovu sestavuje její rozvržení. Každá otevírací složená závorka zahajuje odsazený blok a každá deklarace končí na vlastním řádku.

Podporuje vnořování?

Ano, vnořená pravidla a nadřazené selektory, jako je &:hover, jsou odsazeny o jednu úroveň hlouběji než nadřazený prvek, tedy o dvě mezery na úroveň. Dvojtečky v selektorech zůstávají připojené, takže se &:hover nerozdělí.

Jak se formátují proměnné, mixiny a include?

Proměnné, například $color: #333;, mají za dvojtečkou mezeru a @mixin i @include zachovávají své argumenty s mezerou za každou čárkou. Řídicí direktivy, jako jsou @if, @each a @for, mají před závorkou mezeru.

Zachovávají se interpolace?

Ano, interpolace, jako je #{$name}, se zkopírují přesně tak, jak jsou zapsány. To zahrnuje interpolace v selektorech, například .icon-#{$name}, i v názvech vlastností.

Kompiluje nástroj moje SCSS nebo ověřuje jejich správnost?

Ne, nekompiluje je do CSS ani nekontroluje syntaxi, takže formátuje také neúplné úryvky. Chyby a výstup CSS získáte pomocí kompilátoru Sass.

Zachovávají se komentáře?

Ano. Řádkové komentáře začínající // ukončují svůj řádek a blokové komentáře zůstávají na místě.

Funguje to se syntaxí Sass s odsazením?

Ne, nástroj je určený pro SCSS, které používá složené závorky a středníky. Soubory se syntaxí .sass založenou na odsazení nemají složené závorky, podle kterých by šlo odsazení určit, proto je nejprve převeďte na SCSS.

Mohu změnit odsazení?

Ne, výstup vždy používá dvě mezery a formátovač nemá žádná nastavení. Stejná šablona stylů proto vždy vytvoří stejný výsledek.

Proč je výsledek uzavřen v bloku kódu scss?

Výstup se vrací jako blok kódu Markdown označený scss, takže se zobrazuje se zvýrazněním syntaxe. Pro soubor .scss zkopírujte řádky mezi ohraničujícími značkami.

Jak velká může být moje šablona stylů?

Až 5 MB na jedno spuštění; větší vstup bude odmítnut s upozorněním. Výstup je totožný s možností SCSS ve formátovači kódu.

O OneClick Pro

OneClick Pro je bezplatná kolekce více než 150 webových nástrojů pro každodenní práci: převod obrázků a jednotek, formátování a ověřování kódu, kontrolu domén a SEO i práci s textem, daty a čísly. Každý nástroj funguje bez registrace či předplatného a zadané údaje se používají pouze k výpočtu výsledku a nikdy se neukládají. Používejte ji jako rychlou sadu nástrojů pro jednorázové úkoly nebo si uložte do záložek nástroje, na které se každý den spoléháte.