CSS preprocessing: a complicated love story

A few months ago I completed a website project for my HTML class (which unfortunately I cannot share at this time). Early on in the project’s development, I decided I would use a CSS preprocessor, namely Sass (the SCSS syntax), to write my stylesheet. A development progressed, I quickly began to enjoy many of the features Sass provides, including @extend, @mixin, @import/@include, nested selectors, simplified media queries, and variables ( 😀 ). These features made my styling so much nicer, easier to write, and possibly improved the entire site design. I thoroughly enjoyed using SCSS in this project and from this experience, I planned on using SCSS more often. However, relations were not always this friendly between me and this force to be reckoned with know as CSS preprocessing.

For some months before this class began, I had been hearing of such a thing as CSS preprocessing. I had been seeing it used in various projects I came across, and had also read about it in passing on sites such as CSS-Tricks. However, I never really felt like exploring it further. “I can write pure CSS myself” I thought, “Why do I need some program to take a modified syntax and convert it to CSS?” One day, just for fun, I started looking around the GitHub Jobs board, a place where companies can post job openings. As I looked through the openings for my chosen profession, website design and development, I found many of the openings required knowledge in either Sass or LESS, another CSS preprocessor. “Hm…. it looks like I might have to learn one or both of these preprocessor languages in order to be qualified for a job some day.”

Soon thereafter, I started testing the waters by installing Ruby and Sass and converting the stylesheet of a simple project to Sass. I also saved the Sass documentation to my Android device for reading. As I started converting the stylesheet, I began to see why Sass is highly used in personal and corporate projects. It made styling so much easier and, dare I say, more fun! I was able to modularize my styles much more, variables made it easier to maintain a consistent look and feel, and with the ability to import multiple files into a single file and compile and minify the resulting CSS all in one step, I was highly impressed.

That is why a few months later I decided to use Sass for my school project. More recently, GitHub Pages received native Sass support and automatic compiling (all thanks to Jekyll 2.2.0, which powers it), and because of this new feature I converted Triangle Land – GitHub Annex to Sass and am currently going through everything and cleaning it up. 😀 I am not using Sass in all my projects yet, and I can say right now I probably will never for a select few, but I know I will be using it much more.

If you are wanting to learn more about CSS preprocessing, I recommend visiting the Sass and LESS websites for more information and how their compilers are written (P.S. Sass is Ruby with a C version under development, LESS is JavaScript-powered), as well as these two articles which also will be helpful.

Happy preprocessed CSS!


One thought on “CSS preprocessing: a complicated love story

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s