CSS preprocessor rundown

It’s time for another CSS Preprocessor comparison. With over over 10 Preprocessors in the wild, it’s getting harder to choose the right one for your organization to use.

The reasons to use a preprocessor are many
– change a variable in one place instead of many to change a color!
– better @imports, by compiled stylesheets mean less requests, faster browser load times
– the @mixins save time and code
– nest classes @extend and save time
– some Math comes in handy to add a little extra margin or width sometimes
– loops! Need we say more?

You’ll be creating more maintainable CSS and make life easier in the future when changes are needed.

Now for the options:

SASS
-Seems to be the fastest growing preprocessor right now. Some people like how it omits the use of semicolons and brackets. You can also use SCSS, which is written more like traditional CSS.

LESS

Stylus
-get properties from parents and pull them into children and/or mixins

PostCSS

cssnext

rework

Sly

Stylecow

Pleeease

CSS-Crush

CSS-On-Diet

Clay

Comments