wiki:css/css-preprosessointi

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

--

*SCSS - Syntactically awesome stylesheets*

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

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-lang.com/guide SASS Opas]

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