CSS-i eeltöötlejad on selgitatud

CSS-i eeltöötlejad muutuvad üha enam esiotsa veebiarendajate töövoos. CSS on uskumatult keeruline ja nüansirikas keel ning selle kasutamise hõlbustamiseks pöörduvad arendajad sageli eeltöötlejate, näiteks SASS või LESS, poole.

CSS-i eeltöötlejad kompileerivad koodi, mis on kirjutatud spetsiaalse kompilaatori abil. Seejärel loovad nad selle CSS-faili loomiseks, millele saab seejärel viidata peamises HTML-dokumendis.

Mis tahes CSS-i eelprotsessori kasutamisel saate programmeerida tavalises CSS-is täpselt nagu siis, kui eeltöötlust ei oleks paigas. Hea on see, et teil on ka rohkem võimalusi. Mõnel, näiteks SASSil, on spetsiifilised stiilistandardid, mis on mõeldud dokumendi kirjutamise veelgi lihtsamaks muutmiseks, näiteks vabadus jätta breketid soovi korral välja.

Muidugi pakuvad CSS-i eeltöötlejad ka muid funktsioone. Paljud pakutavad funktsioonid on eeltöötlejate hulgas uskumatult sarnased, süntaksis on vaid väikesed erinevused. Seega saate valida peaaegu iga soovitud ja saate saavutada samu asju. Mõned kasulikud funktsioonid on:

Muutujad

Üks levinumaid elemente mis tahes programmeerimiskeeles on muutuja, millest CSS-il eriti puudu on. Muutujate käsutuses olles saate väärtuse üks kord määratleda ja kogu programmi jooksul uuesti kasutada. Selle näiteks on SASSis:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

SASS yourcolorMuutuja üks kord deklareerides on nüüd võimalik sama täpset värvi kogu dokumendis uuesti kasutada, ilma et peaksite definitsiooni kunagi uuesti sisestama.

Silmused

Veel üks levinud element keeltes on tsüklid, millestki muust puudub CSS. Silmuseid saab kasutada samade juhiste kordamiseks mitu korda, ilma et peaksite neid mitu korda uuesti sisestama. SASSi näide oleks järgmine:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

See silmus säästab meid vajadusest kirjutada sama koodi mitu korda, et veerise suurust muuta.

If / muud avaldused

Veel üks funktsioon, mis CSS-il puudub, on If / Else laused. Need käivitavad juhiste komplekti ainult siis, kui antud tingimus on tõene. Selle näiteks on SASSis:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Siin muudab taustavärv värvi sõltuvalt lehe keha laiusest.

Need on vaid mõned CSS-i eeltöötlejate peamistest funktsioonidest. Nagu näete, on CSS-i eeltöötlejad uskumatult kasulikud ja mitmekülgsed tööriistad. Paljud veebiarendajad kasutavad neid ja on väga soovitatav vähemalt üks neist ära õppida.

Rohkem informatsiooni:

  • Parimad CSS-i õpetused
  • SASSi dokumendid: //sass-lang.com/
  • Teie veebikaunistuste eeltöötleja SASS
  • VÄHEM dokumente: //lesscss.org/
  • Styluse dokumendid: //stylus-lang.com/