CSS-esiprosessorien vertailu : Sass, Less ja Stylus
Valtonen, Ville (2017)
Valtonen, Ville
Hämeen ammattikorkeakoulu
2017
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2017060812882
https://urn.fi/URN:NBN:fi:amk-2017060812882
Tiivistelmä
Opinnäytetyön päätavoitteina oli tutkia, mitä CSS-esiprosessointi tarkoittaa ja mitä lisäarvoa CSS-esiprosessorit voivat tuottaa CSS-tyyliohjeiden käsittelyyn. Lisäksi siinä vertailtiin keskenään kolmea suosittua CSS-esiprosessoria sekä otettiin selvää, millaisia eri vaihtoehtoja www-sisällönhallintajärjestelmä WordPress tarjoaa niiden hyödyntämiseen. Opinnäytetyön toimeksiantaja oli hämeenlinnalainen Aatos Media.
Teoriaosuudessa esitellään aluksi web-kehityksen perustekniikoita ns. front-endin näkökulmasta pääpainon ollessa CSS-tyyliohjeissa. Lisäksi siinä käsitellään www-sisällönhallintajärjestelmiä ja käydään läpi, mitä CSS:n esiprosessointi tarkoittaa yleisellä tasolla.
Käytännön osuudessa tutkitaan CSS-esiprosessoreja ja niiden toimintaa muun muassa käytännön esimerkein sekä vertaillaan Sass-, Less ja Stylus-esiprosessorien eri ominaisuuksia keskenään. Lopuksi tarkastellaan, miten kyseisiä CSS-esiprosessoreja voidaan hyödyntää WordPress-kehityksessä.
Työn päätuloksena saatiin selville, että oikein käytettyinä CSS-esiprosessorit voivat tuottaa todellista lisäarvoa jo melko pienissä projekteissa. Lisäksi vertailun perusteella todettiin, että ainakin markkinoiden suosituimpiin kuuluvien CSS-esiprosessorien ominaisuuksien erot ovat kokonaisuudessaan melko pieniä, mutta Sassia voidaan pitää monipuolisimpana vaihtoehtona.
Teoriaosuudessa esitellään aluksi web-kehityksen perustekniikoita ns. front-endin näkökulmasta pääpainon ollessa CSS-tyyliohjeissa. Lisäksi siinä käsitellään www-sisällönhallintajärjestelmiä ja käydään läpi, mitä CSS:n esiprosessointi tarkoittaa yleisellä tasolla.
Käytännön osuudessa tutkitaan CSS-esiprosessoreja ja niiden toimintaa muun muassa käytännön esimerkein sekä vertaillaan Sass-, Less ja Stylus-esiprosessorien eri ominaisuuksia keskenään. Lopuksi tarkastellaan, miten kyseisiä CSS-esiprosessoreja voidaan hyödyntää WordPress-kehityksessä.
Työn päätuloksena saatiin selville, että oikein käytettyinä CSS-esiprosessorit voivat tuottaa todellista lisäarvoa jo melko pienissä projekteissa. Lisäksi vertailun perusteella todettiin, että ainakin markkinoiden suosituimpiin kuuluvien CSS-esiprosessorien ominaisuuksien erot ovat kokonaisuudessaan melko pieniä, mutta Sassia voidaan pitää monipuolisimpana vaihtoehtona.