wiki:css/css-preprosessointi
Last modified 4 years ago Last modified on 2014-03-17 12:02:33

*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.

SASS-opas

TODO: trac muotoilusääntöjen viilaaminen sivulle..