So everyone has been using SASS for years and because I am a very lazy developer, I have been avoiding it, the whole thing sounded very confusing to me, so I soldiered on, not learning SASS or any of the popular preprocessors. I dabbled in it here and there, using it for large wordpress installs that had a lot of different templates with a lot of different colors. However I finally saw the light one afternoon when I was on codepen (literally my favorite hangout on the internet lately) and I saw this beautiful CSS effect:
The gradients. the beautiful dropshadow that reminded me of a 70s cartoon, this was something I had to learn if I could make truly beautiful rainbows! Unfortunately, I am my own server admin and I had to set out installing SASS by myself on my server.
These were my goals too once
SASS is actually a ruby library, and so according to their well designed documentation it should be a snap to install! sudo gem install compass and away we go, right?
SASS has more obscure dependency libraries than a core install of Gentoo, to get my beautiful gradients to work I had to also install the compass animation library and then the Foundation Framework. So now, surely, I will have all I need to start my beautiful gradients, correct? Still not right, even after I created the project it was having problems finding compass dependencies. At this point, I had probably spent an hour on trying to get mixins working, and I was already getting fed up with SASS. Stackoverflow suggested that it was my folder structure, and that my installation of compass was not from the right repository (installing it from the ubuntu package manager instead of through rpm), or maybe I should try the alpha version of compass, or my install of ruby was corrupted.
Finally, frustrated with every compile resulting in errors, I used sassmeister to compile my code and I had beautiful gradients that didn’t work! (as a side note, this was a three hour problem that was Chrome specific, since keyframe animation is still in beta you must specify the browser as @-webkit- or @-moz- etc) Four hours into using SASS for more than specifying color variables, and I have gotten a gradient to work. I was officially sassed out. I think I stared at my gradient for four hours though, so the trade off was decent.
Stylus to the Rescue
I will talk about how perfect Stylus is in every single way until I am lowered into my grave. Stylus is a node.js based CSS preprocessor, and since I’ve been doing a lot with node lately, I was glad to use something else other than coffeescript. I found some gradient text that kind of reminds me of the Zune logo and tried to implement it.
I already had npm on my server already, so installing stylus was a snap.
npm install stylus -g
I then created a folder called stylus and put my lone stylus script in the folder and ran:
stylus --compress some.styl some.css
and it compiled without error, and I think I cried because SASS had trained me to fear the compiling process. I spent the next week with Stylus in love with it’s ease of use and lack of dependencies, I added the nib framework which added additional mixins with a simple @import.
I’ve been using Stylus for about a month now, and I cannot recommend it enough. Less dependencies, less fuss to install, less everything. Stylus is styless of a hassle (I’m sorry). Their documentation is very detailed and while SASS is better known, I feel like Stylus will be gaining ground as more people find it easier to deal with. Don’t waste your time with the SASS when you can have a no fuss, fun girlfriend of a preprocessor like Stylus.
Cover image for this post is Zorak, because I feel like he’s the only sass master I need in my life