Sickdesigner.com

The work & fun of web designer Radu Chelariu.

Menu

Experiments, ideas & things done just for the fun of it

Contact me

Feel free to get in touch with me if you want to hire me (design work, speaking engagements, guest posting), interviews, if you have a problem with either Photoshop, HTML, CSS or Wordpress, or if you just want to talk about design. I'm also available on Twitter, Facebook or Google+, if that's more your game.

But, for the love of all that is Bauhaus, please do not contact me if you're selling something or about link exchanges and that kind of stuff. I will not reply to these requests.

SASS for designers

CSS preprocessors like LESS or SASS are cool. They speed up your workflow, they cut down on how much drivel you have to write and are a life saver for multi template projects. There’s no wonder every frontend guy or gal out there has adopted this cool new way of writing CSS.

A quick side note, if you’re unsure about which is best, SASS or LESS, this post by the almighty Chris Coyier should answer it.

About 2 years ago, while working at Mind Magnet Software, I had my first run-in with SASS as part of a custom Ruby on Rails project for a client. And it was a gruesome experience, to say the least. Back then, we were using .sass syntax, as SCSS was just beginning to show its head and Compass worked about three days a week. I exaggerate, but the point is, back then, the technology wasn’t mature enough. Working over a RoR project for the first time didn’t help, either.

Since then, I ignored SASS and focused more on interaction design and usability in the ecommerce world. But every now and again, the subject of preprocessors kept popping up either on Twitter, Facebook or the odd secret designer society group (what, you guys don’t have that?) and every time it did there was one term which seemed tonbe ombilically attached to SASS: Ruby. This has been, for some time now, the main deterrent for switching to SASS for a large crowd of non-Ruby designers. Like myself, there are many designers out there who work extensively with CMSs like WordPress or Magento, to name but a few, or even just custom projects. And they aren’t embracing any CSS preprocessor for one very good reason: they don’t know they can.

Well, as the discussion about preprocessors has gathered a bit of momentum in recent time, I decided to take a closer look at what the fuss was all about. I’ve definitely became enamored with SCSS, especially its the more relaxed take on tabbing (something SASS was really bad at) and wanted to fit it into my regular workflow, which usually implies a lot of work with Magento and its quirky bits. Until now, I’ve been using a sandbox theme I put together, but I felt I could streamline the process even further by using SASS.

So, in a nutshell, here’s how I got SASS working for me on both OSX and Windows:

Windows

Step 1: Install Ruby

Go to http://rubyinstaller.org and download and run the latest Ruby installer .exe

Step 2: Install SASS

Once Ruby’s installed, run a prompt window. On any Windows version earlier than 8, press Start and in the Run field type CMD and hit Enter. On Windows 8, press Win+Q, type CMD and hit Enter.
In your prompt window type gem install sass and hit Enter. Some time later, SASS will be installed.

Step 3: Install Compass

In the same prompt window, type gem install compass. Some time later, Compass will be installed. Compass is what you’ll be using to process your SCSS code into browser readable CSS.

Step 4: Make a project

Make a test folder anywhere you want. Shift+Right Click in that folder and click Open Command Prompt Here. In the prompt window which just appeared type compass create project name. After a few seconds, your test folder will be populated with a bunch of ruby nonsense, a /sass folder and a /stylesheets folder. Pretty self explanatory, really.

Step 5: Get ready to rumble

In the same prompt window, type compass watch and lo and behold, Compass will let you know that it’s watching your every move, ready to compile any changes to the SCSS files in the the /sass folder of your test project.

As a side note, what I like to do is mount an FTP server to disk and create a project right up on the server, thenthe compiled CSS to my actual project. This way, whenever I make any changes to the SCSS file, Compass will automatically compile the CSS file on the server and all I have to do is hit Refresh in my browser. Pretty sweet deal, if you ask me.

OSX

Step 1: Install Ruby

You don’t need to install anything. OSX comes with Ruby preinstalled. Woohoo!

Step 2: Install SASS

Open a Terminal window and type sudo gem install sass. As Ruby is part of the OSX core, you need to provide your admin password, that’s what the “sudo” is for.

Step 3: Install Compass

Same as before, type sudo gem install compass. Bla, bla, time passes, Compass is installed.

Step 4: Make a project

Macs don’t have that whole Shift+Right Click to open a prompt window thing, but fortunately, there’s this little app that opens up a Terminal window based on the front most Finder window. And it’s free! As with Windows, type compass create projectname to start up a new project.

Step 5: Get ready to rumble

In the same terminal window, type compass watch and Compass will let you know that it’s ready to compile any changes to the SCSS files in the the /sass folder of your test project.

OSX is a little bitch about mounted FTP servers in that it can do it natively, but it’s read-only, which is a real bummer. Fortunately, there are alternatives, like Transmit, which I recommend mostly because it’ll work on Mountain Lion as well as lesser felines.

There you have it, kids, the designer friendly way of getting up and running with SASS. And if, by chance, you’re still on the fence about preprocessors, just remember that the CSS working group has already started to add things like variables and mixins to future versions of CSS. Do yourself a favor and jump on the bandwagon while you can still call yourself an early adopter.

Cheers, all!

6 Comments so far

  1. Stefan says:

    I use CodeKit on Mac for SASS/LESS webdevelopment. Easy, simple and no installation required.

    • I’ve tried Codekit and while its benefits are clear, I couldn’t justify paying at least 25$ to myself. Not for something I can do myself, granted with a bit of elbow grease.

  2. Jeremy says:

    Depending on your development tool, there are tons of plugins that will take care of this for you. Making a “build system” to compile your scss files in Sublime Text 2 (IDE) is pretty easy; if you’re on windows and don’t want to install Ruby I even wrote a wrapper+ plugin to compile sass files (see my website for link). Or even better if you’re on Windows Mindscape web work bench is a great plugin for Visual Studio which auto compiles sass and other processors.

    As a side note, I think it was Scott Hanselman who wrote a great blog post about how good of a front end tool VS (even express) has become, and he’s right; windows users should check it out.

  3. Again. Save yourself from the hassle of installing ruby and just use an app like compass.app (http://compass.handlino.com/) which automatically converts your SASS files into CSS when you save. That’s the way to go, everything else is too complicated and will deter everybody who wants to start with SASS.

Speak your mind