As discussed in my previous article,“Let’s get SASSy: The World of CSS preprocessing” we learned that SASS stands for Syntactically Awesome StyleSheets. They’re a way of utilising programming techniques within CSS in order to help us speed up workflow.
In this blog post I’ll briefly describe a couple of different ways to set yourself up, ready to use SASS.
First of all, SASS is available for use regardless of your platform. You can be on Linux, Mac or Windows.
As well as considering your platform, you also have to make a decision on how you prefer to control the compiling of your SASS. Most of the ‘hardcore’ users will tend towards the command line, since it can give much more control. Not necessarily control over SASS and its features, but other libraries and dependancies that you can integrate with SASS.
The other option is to go with an application using a graphical user interface. This is much less scary for some people, and if you are simply looking to work with and compile SASS it will still do the job just fine.
Here are a brief selection of options for user interface based SASS applications.
There are a number of other options for all three systems, but I decided to include two open source options as well as two paid options.
Aside from the additional “power user” benefits of using command line, one of the other great things is that there is no cost tied into utilising SASS via the command line. It can be done on every platform without any cost whatsoever, and where some UI SASS solutions can be a little glitchy or slow, command line is quick and consistent.
If you’d prefer to try and wrap your head around the concept of SASS without any setup, you can do that too! Check out http://sassmeister.com/ – It’s a browser based SASS playground that provides you with a split screen setup. On the left is your SCSS, on the right is your compiled CSS. It’s compiled on the fly and even lints your code!
For this example, I’m going to run with Scout. In my experience so far, Scout may not have much in the way of complex options. However it’s free, very simple to set up and lets us get running quickly. So here we go.
First of all, you’ll want to grab Scout. You can get it right here – http://mhs.github.io/scout-app/
Go ahead and download the installer. When you run it you’ll be greeted with the following screen:
Find a location on your pc and install Scout. Once you’ve installed it will run automatically.
All you need to do in order to set up a new project within Scout is to click the “+” button in the bottom left of the Scout window:
I downloaded a copy of the Gumby Framework, since it’s already SASS ready, and used the Gumby folder for my Scout project. This is the window with everything setup:
Now all that you have to do when you would like the SCSS to be compiled to CSS is hit the play button on your project. It’s that easy.
The first thing you will need to ensure before attempting to set up SASS, is that you have Ruby installed. What’s Ruby? From the Wikipedia definition, Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. But if that sounds a bit intimidating, don’t worry, you don’t need to know too much about Ruby. It’s just something we need to have installed before we can set up SASS.
What’s more, if you’re on a Mac you’ll already have Ruby installed by default. Lucky you! Have a break, check your iPhone and twirl your ironic moustache. (I’m joking. I love you guys too.)
Linux users can install Ruby through rvm, rbenv or the apt package manager.
Windows users can quickly and easily install Ruby using this single-click Ruby Installer.
Once you have ruby installed, you need to access command line using Ruby (you can either run command line with Ruby, or add Ruby to your Environment Path within Windows) and then simply type the following code:
gem install sass
Boom. It’s installed. Now all you need is the command that tells SASS to watch a directory for changes in SCSS files, and to automatically compile them into css.
sass –watch path/sass-directory
Whether you’ve gone with an application or command line, you’re now set up and ready to go with SASS. I’ll be posting another article soon digging deeper into what we can accomplish using SASS.