CSS-esiprosessorit selitetty

CSS-esiprosessoreista on tulossa yhä enemmän tukiasema käyttöliittymän web-kehittäjien työnkulussa. CSS on uskomattoman monimutkainen ja vivahteikas kieli, ja sen käytön helpottamiseksi kehittäjät käyttävät usein esiprosessoreita, kuten SASS tai LESS.

CSS-esiprosessorit kokoavat koodin, joka kirjoitetaan erityisellä kääntäjällä. Sitten he käyttävät sitä CSS-tiedoston luomiseen, johon HTML-pääasiakirja voi sitten viitata.

Kun käytät mitä tahansa CSS-esiprosessoria, voit ohjelmoida normaalissa CSS: ssä samalla tavalla kuin jos esiprosessoria ei olisi paikallaan. Hyvä asia on, että sinulla on myös enemmän vaihtoehtoja. Joillakin, kuten SASSilla, on erityiset tyylistandardit, joiden on tarkoitus tehdä asiakirjan kirjoittamisesta entistä helpompaa, kuten vapaus jättää aaltosulkeet pois, jos haluat.

Tietenkin CSS-esiprosessorit tarjoavat myös muita ominaisuuksia. Monet tarjolla olevista ominaisuuksista ovat uskomattoman samanlaisia ​​kaikissa esiprosessoreissa, ja niiden syntaksissa on vain pieniä eroja. Siten voit valita melkein minkä tahansa haluamasi, ja voit saavuttaa samat asiat. Joitakin hyödyllisiä ominaisuuksia ovat:

Muuttujat

Yksi yleisimmin käytetyistä kohteista millä tahansa ohjelmointikielellä on muuttuja, josta CSS: stä erityisesti puuttuu. Kun käytettävissäsi on muuttujia, voit määrittää arvon kerran ja käyttää sitä uudelleen koko ohjelmassa. Esimerkki tästä SASS: ssa olisi:

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

Kun SASS yourcolormuuttuja ilmoitetaan kerran, on nyt mahdollista käyttää samaa täsmällistä väriä koko asiakirjassa tarvitsematta kirjoittaa määritelmää uudelleen.

Silmukat

Toinen kielillä yleinen kohde on silmukat, jotain muuta CSS: stä puuttuu. Silmukoita voidaan käyttää toistamaan samat ohjeet useita kertoja ilman, että niitä täytyy lähettää uudelleen useita kertoja. Esimerkki SASS: sta olisi:

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

Tämä silmukka säästää meitä siitä, että meidän on kirjoitettava sama koodi useita kertoja marginaalin koon muuttamiseksi.

Jos / Muut lausunnot

Vielä yksi ominaisuus, josta CSS: stä puuttuu, ovat If / Else-lauseet. Nämä suorittavat ohjeet vain, jos annettu ehto on totta. Esimerkki tästä SASS: ssa olisi:

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

Tässä taustaväri muuttaa väriä sivun rungon leveydestä riippuen.

Nämä ovat vain muutamia CSS-esiprosessoreiden päätoiminnoista. Kuten näette, CSS-esiprosessorit ovat uskomattoman hyödyllisiä ja monipuolisia työkaluja. Monet web-kehittäjät käyttävät niitä, ja on erittäin suositeltavaa oppia ainakin yksi niistä.

Lisää tietoa:

  • Parhaat CSS-oppaat
  • SASS-asiakirjat: //sass-lang.com/
  • SASS, esiprosessori web-koristeellesi
  • VÄHEMMÄT asiakirjat: //lesscss.org/
  • Stylus-asiakirjat: //stylus-lang.com/