For designers and developers, text editors are a matter of personal preference – there are hundreds available freely, or at low cost. In this exercise, we're going to look at adding support for SASS into Sublime Text 2, although the same workflow principles will apply to similar editors.
For this recipe, you will need to obtain a copy of the shareware application Sublime Text 2, which is available at http://www.sublimetext.com/2 – the latest version at the time of writing is 2.0.1. You will need to purchase a license for continued use – at the time of writing, the cost is USD 59. You will also need to get a copy of the SASS plugin for Sublime Text 2 – you can download either the ZIP or tar package from https://github.com/n00ge/sublime-text-haml-sass/downloads (I will assume you have downloaded the ZIP file, for the purposes of the recipe).
Let's begin by installing Sublime Text 2. Double click on the
Sublime Text 2.0.1 Setup.exefile, and accept all defaults, including selecting the option Add to explorer context menu, during the installation.Launch Sublime Text 2 then click on Preferences, then Browse Packages…. This will open a folder within your profile.
Go ahead and extract the contents of the ZIP file you downloaded earlier. Inside it you will find two folders, one called
Ruby Hamland the otherSASS. Copy these two folders into thePackagesfolder you opened from within Sublime Text 2, and restart Sublime Text 2.To confirm that all has worked properly, open the
example1.scssfile from the previous recipe in Sublime Text 2; you should see something like the following screenshot:
The SASS support package that you downloaded from Github contains a number of layout instructions to tell Sublime Text 2 how to format SASS code within the browser. It also contains commands that will allow you to build the CSS file from within SASS. If you click on the Tools menu, then Build, you can initiate the SASS compiler to automatically compile your code, as we did in the previous recipe. It will start the compiler's watch facility, which will then kick in when you make the next change within Sublime Text 2.
There are lots of editors available Sublime Text 2 may not suit your needs, so it is worth looking online and trying a few before finding one that works for you. As an example, for Mac users, you may prefer something like CodeKit, which is available from http://incident57.com/codekit/index.php. This already includes support for SASS.
There may be instances where you may prefer to use the command line to create your SASS files though; you may prefer to use a GUI just to compile your code. In the next recipe, we'll take a look at how you can do this, using Scout.
