CSS preprocessors comparison

Likes 1

Cascading Style Sheets (CSS) pre-processors help you to maintain your CSS files more easily. It can help you make your CSS more readable, maintainable by using some features not available in the CSS language.

Variables allow to easily reuse the same value in your CSS, making it easier to read or update.

Mixins allow embedding all the properties of a class into another class.

Nesting allow to have a more concise code, which mimics the structure of your HTML..

Get image dimensions allow to set properties using the size of a given image ensuring your CSS is adapted if the image is changed.

Feel free to help complete and correct this comparison.

Link	Less	Sass (SCSS syntax)	Stylus
Sito web	lesscss.org	sass-lang.com	github.io/...
Latest version	2.5.3	3.4.19	0.52.4
Data di rilascio	2015-09-25	2015-10-10	2015-09-04
Development language	Javascript	Ruby	Javascript
Caratteristiche
Variables	Sì	Sì	Sì
Mixins	Sì	Sì	Sì
Conditionals	-	Sì	Sì
Get image dimensions	Sì	-	Sì
Color manipulation	Sì	Sì	Sì
Dark/light color detection	-	-	Sì
Nesting	Sì	Sì	Sì
Additional
Syntax sample	@mycolor: black; #header { color: @mycolor; .navigation { font-size: 12px; } .logo { width: 300px; } }	SCSS syntax: $mycolor:black; #header { color: $mycolor; .navigation { font-size: 12px; } .logo { width: 300px; } }	mycolor=black #header { color: mycolor; .navigation font-size: 12px; .logo width: 300px; }
Aggiornato	2015-11-12 23:18:34	2015-11-12 23:18:34	2015-11-12 23:24:46

CSS preprocessors comparison

User reviews and comments