CSS SCSS:ksi

CSS-syöte

Muunnettu SCSS

Esimerkkejä CSS → SCSS

Tasaiset CSS-valitsimet muunnetaan sisäkkäiseksi SCSS:ksi. Esimerkki:

Sisäkkäinen rakenne tasaisesta CSS:stä

CSS-syöte:

Syöte

Muunnettu SCSS:

Tulos

Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää dataa.

Mikä on CSS SCSS:ksi?

SCSS lisää CSS:ään muuttujia, sisennystä ja mixinejä. Tavallisen CSS:n muuntaminen SCSS:ksi järjestää sen sisäkkäisesti ja valmistelee SCSS-ominaisuuksia varten. Työkalu analysoi CSS:si ja tuottaa SCSS-tyylistä rakennetta. W3C:n CSS-määrittelyt kuvaavat lähdon; Sass määrittää tuloksen.

Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Tulos on kelvollista SCSS:ää. Käänteiseen (SCSS → CSS) käytä SCSS CSS:ksi. Lessille CSS Lessiksi.

Miten työkalua käytetään

Liitä tai lataa CSS

Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.

Tarkista SCSS-tulos

Oikea paneeli näyttää muunnetun SCSS:n. Valitsimet voidaan sisentää kun rakenne sen sallii. Voit lisätä muuttujia ja mixinejä käsin muunnoksen jälkeen.

Kopioi tai lataa

Käytä Kopioi tai Lataa tiedostona. Käännä SCSS SCSS CSS:ksi -työkalulla varmistaaksesi tuloksen. Muotoile CSS ensin CSS-muotoilijalla.

Milloin CSS → SCSS auttaa

Kun siirrät projektia tavallisesta CSS:stä SCSS:ään tai sinulla on suunnittelutyökalun vienti-CSS ja haluat integroida sen SCSS-pohjaiseen koodipohjaan (esim. Bootstrap 4+, Foundation), tämä muunnos antaa lähtökohdan. webpack ja Vite kääntävät SCSS:ää. Tulos antaa sisäkkäisen rakenteen, jota voit hioa muuttujilla ja mixineillä.

Suunnittelutyökalut kuten Figma vievät usein pelkkää CSS:ää. Muunnos SCSS:ksi täällä helpottaa komponenttipohjaiseen rakenteeseen lisäämistä. Lessille käytä CSS Lessiksi. Vendor-etuliitteisiin CSS-etuliite.

Usein kysyttyä

Lisääkö se muuttujia tai mixinejä?

Muunnin keskittyy rakenteeseen (sisennys). Se ei poimi toistuvia arvoja automaattisesti muuttujiin. Lisää muuttujat ja mixin käsin tarpeen mukaan.

Onko datani yksityinen?

Kyllä. Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.

Miten sisennys toimii?

Työkalu päättelee sisennystä valitsinsuhteista. Monimutkaiset valitsimet voivat jäädä tasaisiksi. Tarkista ja säädä tarvittaessa.

CSS SCSS:ksi vs CSS Lessiksi?

Molemmat tuottavat esikäsittelijäsyntaksia. SCSS on laajemmin käytössä (Bootstrap 4+, monet kehykset). Lessiä käytetään Bootstrap 3:ssa, Ant Designissa. Valitse pinon mukaan.

Voinko kääntää tuloksen?

Kyllä. Liitä SCSS SCSS CSS:ksi -työkaluun kääntääksesi ja tarkistaaksesi. Tuloksen pitäisi vastata alkuperäistä CSS-rakennetta.

Liittyvät työkalut

Sass/SCSS: sass-lang.com ja Sassin dokumentaatio. W3C CSS ja MDN CSS kuvaavat lähdemuodon. Lisäksi Bootstrap, Figma, webpack, Vite.