wiki:frontend/css/css-preprosessointi

Version 3 (modified by jatasalt, 8 years ago) (diff)

Riittänee jos kaikki tieto css-preprosessoinnista on tällä samalla sivulla.

CSS-Esikääntö

CSS Tyylitiedostot ja niiden luominen ei ole juuri muuttunut viimeisten vuosien aikana. Tyylitiedostot ovat staattisia ja niissä ei ole mitään dynaamisia ominaisuuksia, kuten muuttujia, joilla voitaisiin helposti luoda esimerkiksi teeman väritykset taikka korvata header elementtien fontit, vaihtaa fontin kokoa, luoda erilaisia gridejä helposti css:llä. Mahdollisuuksia on monia.

Ratkaisuksi on kuitenkin kehitetty CSS-esikääntäjiä ja niille sopivia kieliä. Näillä kielillä kullakin oma syntaksinsa, joka on lähtöisin CSS syntaksista. Kun nämä tyylit lopulta ajetaan esikääntäjän läpi, saadaan tulokseksi täysin normaalia CSS koodia.

Tämänhetkiset tekniikat

Tällä hetkellä CSS-esikääntöön on muutamia eri vaihtoehtoja. Kukin niistä tarjoaa omat etunsa kehittäjälle. SASS on hyvin monipuolinen ja sen käyttö vaatii tosin hieman enemmän säätämistä kuin LESS, jonka taas saa toimimaan selaimessa yhdellä skriptillä ja muutamalla pienellä muutoksella tyylin link elementtiin.

Tässä on lyhyt lista tämänhetkisistä CSS-esikääntäjistä / kielistä

SASS

'SCSS - Syntactically awesome stylesheets'

"Sass is the most mature, stable, and powerful professional grade CSS extension language in the world."

​SASS-Lang sivusto

Ohjelmointiin tutustumisen jälkeen CSS:n kirjoittaminen alkaa tuntua nopeasti itseään toistavalta ja rajoittuneelta. Apuun ovat tulleet LESS ja SASS CSS-preprocessorit, joiden avulla voidaan käyttää useita ohjelmoinnista tuttuja kikkoja stylesheettejä määritellessä.

  • Muuttujat
  • Määrittelyjen uudelleenkäyttö
  • Sisennetyt CSS määrittelyt
  • jne..

Näistä yleisempi on SASS ja siihen löytyvä laaja Compass mixin-kokoelma jossa löytyy iso läjä valmiita määrittelyjä. Kummatkin on melkolailla saman näköisiä keskenään ja CSS:n kanssa.

Workflow:

  1. Kirjoitetaan näkymän määrittely .scss tiedostoon SASS:ina.
  2. Ajetaan .scss Sass-preprocessorin läpi joka tuottaa selaimen tuntemaa CSS:ää.
  3. Liitetään generoitu CSS web-sivuun jolla se halutaan näyttää.

Kohta 2. hoituu yleensä automaattisesti tekstieditorin/iden puolesta tiedostoa tallettaessa. Käytännössä siis muokataan vain .scss tiedostoa.

Tässä ruby-scripti joka monitoroi kansion sass-tiedostojen muutoksia ja kääntää ne automaattisesti: ​http://bjorkoy.com/2008/10/automatic-compilation-of-sass-and-hss/

​SASS-opas