Razloženo CSS predprocesorjev

Predprocesorji CSS vedno bolj postajajo nosilci delovnega toka spletnih razvijalcev. CSS je neverjetno zapleten in niansiran jezik, v prizadevanjih za lažjo uporabo pa se razvijalci pogosto obrnejo na predprocesorje, kot sta SASS ali LESS.

Predprocesorji CSS sestavijo kodo, ki je napisana s posebnim prevajalnikom. Nato to uporabijo za ustvarjanje datoteke CSS, na katero se nato lahko sklicuje glavni dokument HTML.

Ko uporabljate kateri koli predprocesor CSS, boste lahko programirali v običajnem CSS, tako kot bi, če predprocesor ne bi bil nameščen. Dobra stvar je, da imate na voljo tudi več možnosti. Nekateri, na primer SASS, imajo posebne slogovne standarde, ki naj bi olajšali pisanje dokumenta, na primer svobodo, da opustite oklepaje, če želite.

Seveda CSS predprocesorji ponujajo tudi druge funkcije. Številne ponujene funkcije so med predprocesorji neverjetno podobne, le v sintaksi so majhne razlike. Tako lahko izberete skoraj vsakega, ki ga želite, in lahko boste dosegli iste stvari. Nekatere bolj uporabne funkcije so:

Spremenljivke

Ena najpogosteje uporabljenih postavk v katerem koli programskem jeziku je spremenljivka, ki ji CSS predvsem primanjkuje. Če imate na voljo spremenljivke, lahko vrednost določite enkrat in jo znova uporabite v celotnem programu. Primer tega v SASS bi bil:

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

Z SASS yourcolorenkratno razglasitvijo spremenljivke je zdaj mogoče to isto barvo ponovno uporabiti v celotnem dokumentu, ne da bi morali kdaj vtipkati definicijo.

Zanke

Druga pogosta postavka v jezikih so zanke, nekaj drugega pa manjka CSS. Zanke je mogoče uporabiti za ponavljanje istih navodil večkrat, ne da bi jih bilo treba večkrat ponovno vnašati. Primer SASS bi bil:

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

Ta zanka nam prihrani, da bi morali večkrat napisati isto kodo, da bi spremenili velikost roba.

Če / druge izjave

Še ena lastnost, ki ji CSS manjka, so stavki If / Else. Ti bodo izvedli nabor navodil le, če je dani pogoj izpolnjen. Primer tega v SASS bi bil:

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

Tu bo barva ozadja spremenila barvo, odvisno od širine telesa strani.

To je le nekaj glavnih funkcij predprocesorjev CSS. Kot lahko vidite, so CSS predprocesorji izjemno uporabna in različna orodja. Številni spletni razvijalci jih uporabljajo in zelo priporočljivo je, da se naučite vsaj enega od njih.

Več informacij:

  • Najboljše vadnice CSS
  • Dokumenti SASS: //sass-lang.com/
  • SASS, predprocesor za vaše spletne garniture
  • MANJ dokumentov: //lesscss.org/
  • Dokumenti za pisala: //stylus-lang.com/