CSS-esiprosessorien vertailu : Sass, Less ja Stylus

Abstract

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.

The main goals of this thesis were to examine what CSS preprocessing means and what type of value CSS preprocessors could add to CSS. Three different popular CSS preprocessors were compared and it was also investigated what kind of options web content management system WordPress provides for utilizing the three preprocessors. The thesis was commissioned by Hämeenlinna-based Aatos Media.

The theory section begins with an introduction to basic front-end web development techniques with main emphasis being on CSS. Web content management systems are also studied. Finally, the section examines what CSS preprocessing means in general.

The practical section begins with examining CSS preprocessors with practical examples, as well as comparing different characteristics of three preprocessors, namely Sass, Less and Stylus. In the last part, it is scrutinized how CSS preprocessors could be used in WordPress development.

Main result of the thesis was that when used correctly CSS preprocessors could add value even to relatively small projects. In addition, based on the comparison it was found that differences in the most popular CSS preprocessors are rather small, but Sass can be considered the most versatile option.