CSS-työkalut

Kaikki yhdessä CSS-työkalupakki: muotoile/kaunista, pienennä/tiivistä, validoi syntaksi, käännä SCSS/Sass & LESS CSS:ksi ja käännä CSS takaisin SCSS:ksi tai LESS:ksi.
Kaikki käsittely tapahtuu paikallisesti selaimessa — dataa ei lähetetä koskaan millekään palvelimelle.
Tila:
Syöte CSS / SCSS / LESS / SASS
Tulos
Käyttöohje: Liitä CSS/SCSS/LESS/SASS vasempaan tekstikenttään, valitse tila ja napsauta Käsittele (tai kirjoita vain — käsittely käynnistyy automaattisesti syötteen mukana).
Miten kukin tila toimii
CSS-muotoilu: Muotoilee CSS:n johdonmukaisella sisennyksellä (2/4 välilyöntiä tai sarkaimia), yksi ominaisuus per rivi. Käsittelee sisäkkäiset at-säännöt kuten @media, @keyframes ja @supports. Säilyttää kommentit (sekä /* */ että yksirivinen). Vaihda Sisennys-valitsin vaihtaakseen 2 välilyönnin, 4 välilyönnin tai sarkaimien välillä.
Pienennä: Poistaa kaikki tarpeettomat tyhjätilat, kommentit ja ylimääräiset merkit tuottaakseen tiiveimmän mahdollisen CSS:n. Sopii tuotantoon tiedostokoon ja kaistanleveyden pienentämiseksi. Tarkista tilapalkista pakkaussuhde.
Validoi: Jäsentää CSS:n ja tarkistaa syntaksivirheet. Ilmoittaa jäsennysvirheet tarkoilla rivi- ja sarakenumeroilla. Näyttää myös tilastot: sääntöjen, valitsimien, määritysten ja at-sääntöjen määrän.
SCSS-muotoilu: Muotoilee SCSS/Sass-tyylitiedostot uudelleen johdonmukaisella sisennyksellä. Käsittelee kaiken SCSS-kohtaisen syntaksin: $muuttujat, @mixin/@include, @extend, @if/@for/@each-ohjausrakenteet, #{$var}-interpolaation ja //-yksirivikommentit. Säilyttää sisennetyn valitsinrakenteen ja sisentää sisennetyt lohkot oikein. Vaihda Sisennys-valitsin vaihtaakseen 2 välilyönnin, 4 välilyönnin tai sarkaimien välillä.
LESS-muotoilu: Muotoilee LESS-tyylitiedostot uudelleen johdonmukaisella sisennyksellä. Käsittelee kaiken LESS-kohtaisen syntaksin: @muuttujat, parametrisoidut mixinet, vartijat (when), @{var}-interpolaation, yhdistämisen ja //-yksirivikommentit. Säilyttää sisennetyn valitsinrakenteen ja sisentää sisennetyt lohkot oikein. Vaihda Sisennys-valitsin vaihtaakseen 2 välilyönnin, 4 välilyönnin tai sarkaimien välillä.
SCSS → CSS: Kääntää SCSS/Sass-tyylitiedostot tavalliseksi CSS:ksi virallisella Dart Sass -kääntäjällä (v1.102). Tukee muuttujia ($var), sisennystä, mixinejä (@mixin, @include), funktioita, @extend-sääntöä, @if/@for/@each-ohjausrakenteita sekä moderneja Sass-moduuleja (@use, @forward). Sass-kääntäjä (~5,4 MB) ladataan laiskasti tämän tilan ensimmäisellä käyttökerralla.
LESS → CSS: Kääntää LESS-tyylitiedostot tavalliseksi CSS:ksi. Tukee muuttujia (@var), sisennystä, mixinejä, parametrisoituja mixinejä, operaatioita, funktioita, vartijoita ja tuontia (@import). Kääntäjä (~150 KB) ladataan laiskasti tämän tilan ensimmäisellä käyttökerralla.
SASS → CSS: Kääntää sisennetyn SASS-syntaksin (.sass-tiedostot, ei aaltosulkeita eikä puolipisteitä) tavalliseksi CSS:ksi Dart Sassilla. Sisennetty SASS käyttää merkityksellistä tyhjätilaa aaltosulkeiden sijaan, mikä tekee siitä tiiviimmän. Sama Dart Sass -kääntäjä (~5,4 MB) käsittelee sekä SCSS- että sisennetyn SASS-syntaksin.
CSS → SCSS: Muuntaa tavallisen CSS:n SCSS-syntaksiin automaattisella sisennysten uudelleenjärjestelyllä. Tunnistaa BEM-tyyppiset kuviot ja siirtää .parent-child-valitsimet &-child-sisennettyihin lohkoihin. Muuntaa jälkeläisvalitsimet sisennetyiksi säännöiksi, pseudoluokkavalitsimet muotoon &:state ja poimii toistuvat CSS-mukautetut ominaisuudet SCSS-$muuttujiksi. Jos CSS:ssä on tasainen, toistuva rakenne, tämä työkalu auttaa uudelleenjärjestelemään sen siistimmäksi sisennetyksi SCSS:ksi.
CSS → LESS: Muuntaa tavallisen CSS:n LESS-syntaksiin automaattisella sisennysten uudelleenjärjestelyllä. Samanlainen sisennys kuin CSS→SCSS: tunnistaa toistuvat vanhempikuviot, jälkeläisvalitsimet ja pseudoluokat. Poimii toistuvat CSS-mukautetut ominaisuudet LESS-@muuttujiksi. Tulos on siistiä, sisennettyä LESS-koodia.
Kaskadi, tarkkuus ja miksi tyylit kilpailevat

Kun useampi sääntö kohdistuu samaan elementtiin, tarkkuus ratkaisee voittajan: rivisisäiset tyylit voittavat id:t, id:t voittavat luokat, luokat voittavat elementtivalitsimet, ja lähdejärjestys ratkaisee tasatilanteet. !important-merkintä ohittaa tämän laskutoimituksen — ja tekee seuraavasta ohituksesta sitä vaikeamman.

Tarkkuus pisteytetään valitsijakohtaisesti, ei lasketa yhteen kontekstista — tarkempi sääntö voittaa, missä kohtaa tyylitiedostoa se sitten onkaan.