Changes between Version 1 and Version 2 of frontend/css/css-preprosessointi


Ignore:
Timestamp:
2014-03-17 23:48:15 (8 years ago)
Author:
henkalni
Comment:

Kullekin Tekniikalle oma sivu? Vai kaikki samalle sivulle?

Legend:

Unmodified
Added
Removed
Modified

  • frontend/css/css-preprosessointi

    v1 v2  
     1== CSS-Esikääntö == 
    12 
     3CSS 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. 
    24 
     5Ratkaisuksi 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. 
     6 
     7== Tämänhetkiset tekniikat == 
     8 
     9Tä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. 
     10 
     11Tässä on lyhyt lista tämänhetkisistä CSS-esikääntäjistä / kielistä 
     12 
     13 * [http://sass-lang.com/ SASS] Syntactically awesome stylesheet 
     14 * [http://lesscss.org/ LESS] LESS CSS 
     15 * [http://learnboost.github.io/stylus/ Stylus] Expressive, dynamic, robust CSS 
     16 
     17== SASS == 
    318*SCSS - Syntactically awesome stylesheets* 
    419 
    … …  
    3449[http://sass-lang.com/guide SASS-opas]  
    3550 
    36  
    3751TODO: trac muotoilusääntöjen viilaaminen sivulle..