CSSpreprosessorien

CSSpreprosessorien tarkoituksena on laajentaa CSS:n mahdollisuuksia ja helpottaa suurien tyylitiedostojen hallintaa. Ne lisäävät ominaisuuksia, joita CSS ei suoraan tarjoa, ja tuottavat lopulta standardin CSS-koodin, joka voidaan ladata verkkosivuille.

Ne tarjoavat muun muassa muuttujia, sisennystä, mixinejä, funktioita sekä mahdollisuuden jakaa tyylit moduuleihin ja tuoda ne uudelleenkäytön avulla. Tämä parantaa ylläpitoa, teemojen hallintaa ja suurten projektien skaalautuvuutta. Lisäksi ne tukevat ominaisuuksia kuten osiointi, sisäkkäiset sääntöjoukot ja laajemman logiikan tyylien määrittelyyn.

Suosituimpia CSS-preprosessorioita ovat Sass (SCSS- ja Sass-syntaksi), Less ja Stylus. Sass tarjoaa kaksi syntaksia: SCSS on CSS:ää muistuttava ja Sass on indentaatioon perustuva. Less käyttää Less-syntaksia ja on tiiviisti integroitavissa JavaScript-ympäristöihin. Stylus on joustava ja sallii monenlaisen kirjoitustyylin.

Käyttöönotto vaatii käännösvaiheen: kirjoitettu koodi muunnetaan CSS:ksi, jota selaimet voivat käsitellä. Yleensä käännös tapahtuu komentoriviltä tai osana rakennusprosessia Webpackin, Gulpin tai muun työkalun avulla, ja tuettuja on lähdekoodin karttoja (sourcemaps) virheenkorjauksen helpottamiseksi.

CSS-preprosessorit eivät ole välttämättömiä kaikissa projekteissa, mutta ne voivat parantaa kehitystyön tehokkuutta, erityisesti suurissa projekteissa ja design-tokenien hallinnassa.