For the re-design of my blog I decided to give Less a backseat, letting Sass take the spotlight. Not familiar with Less or Sass? In a nutshell they're known as preprocessors that give CSS more dynamic features such as functions, variables and a whole lot more. I've been using Less for the majority of this year, and haven't felt the need to change, however, I keep seeing suggestions that Sass is the better framework. Chris Coyier, the writer of css-tricks.com, has written a great article comparing the two languages that is worth a read. So in order to learn something new and draw a comparison between Less & Sass for myself, I decided to use Sass for the CSS in the re-design of my blog. This post is going to cover the setting up of Sass, some useful libraries and insights into my first experience.
Setting Up Sass
Setting up Sass is a little more complicated when on Windows because OS X already has Ruby installed. So the first step is to get Ruby installed on your machine, if your running Windows. This is as easy as downloading and installing the Windows installer which will take care of all the setup of Ruby. Once the setup has complete, open up a command prompt and execute
ruby -v, which, provided the install went to plan, should display the version of Ruby (mine was "ruby 1.9.3p194...").
The next step is to install the Sass gem, if your not familiar with Ruby (like myself), a gem in Ruby is the equivalent of a library. Gems are easy to install, simply execute
gem install sass to install Sass. Executed
sass -v should output the version to make sure Sass is installed (mine was "Sass 3.2.1").
The final step now is to setup an instance of the Sass gem that will handle the conversion of Sass into CSS that can be used to define presentation on a website. This needs to be done each time your going to start working on a Sass file that needs to be converted to CSS. The
--watch command with the file that contains Sass followed by the CSS file separated by a colon. An example of the command is,
sass --watch styles.scss:styles.css, now any changes that are made to
styles.scss will instantly be converted to CSS inside the
styles.css file. An example of the command being executed is shown below, in the example I have made a change to
styles.scss which was detected instantly by Sass and compiled into CSS.
For those who aren't comfortable with setting up Ruby, Mutually Human have created an application that takes care of everything for you. The application is called Scout and it runs on OS X and Windows using the Adobe AIR run-time. Targeted at designers the application has a simple UI where users can manage projects that make use of Sass, all the setup and conversion is handled by Scout in a self contained Ruby environment. If the command line approach isn't for you, then I highly recommend Scout.
.sass or .scss
Sass offers two syntaxes. The first is
.sass, it is the older and based on Haml it aims to be concise by not requiring curly brackets or semi colons. The second, primary syntax is
.scss and is similar to CSS allowing any original stylesheet to instantly be a Sass stylesheet, suiting those taking an existing stylesheet and adding Sass functionality to it. I decided I would go with
.scss. It seems to be the preferred of the two with popular libraries such as Bourbon and inuint.css all written in
.scss. Another benefit is
.scss is that it is just CSS, it should just come naturally, so myself and team members won't be confused or get caught out with conversion errors due to a minor change in syntax.
When developing CSS, Less or Sass, I use the increasingly popular Sublime Text. When coding it is useful to have good syntax highlighting to improve the readability of the code. Unfortunately Sublime doesn't have code highlighting for Sass files out of the box and having used CSS syntax highlighting for
.scss files for a brief moment I decided to seek a more related alternative. When searching on the web there are plenty of options with none standing out as being the preferred solution for developers in the community. I went with a simple package on Github that does the job and only requires placing a couple of directories into the packages folder (Preferences -> Browse Packages...).
Bourbon the Mixin Library
If your not familiar with the term "mixin" it is just like a function or method but for CSS. It is a powerful method to reduce repeating CSS properties by specifying common patterns of CSS that can be reused in elements with a single line. Bourbon is an open source mixin library that contains a load of handy mixins that help with vendor prefixes, browser compatability and just useful common patterns of CSS. One thing that I found hugely encouraging about Bourbon was how up to date and well maintained the framework is, with a hive of contributors on Github. Installation can be done a couple of ways, either using a Ruby gem similiar to the Sass installation process, or simply downloading the source code from the Github repository and copying the
app/assets/stylesheets/ folder into your project and then including the
_bourbon file using the
@import feature in Sass.
I thoroughly enjoyed my experience with Sass and feel like it has really pushed me to writing better organised and more efficient CSS. I was so impressed with Sass I am now using it on work and personal projects from here on out, preferring it to Less. One of the huge benefits Sass has over Less for me is that it easily fits my development process without requiring any thought on handling conversion to CSS for development and deployment removing any need for a build script. The other benefit that really appeals to me is how active the Sass community feels compared to Less. Chris Coyier highlights this in the "Active Development" section at the bottom of his article comparing Sass and Less. Sass seems to have more impressive up to date third party frameworks such as Bourbon and inuit.css that really can take a lot of the heavy lifting off the developer freeing more time to focus on the specific styles for the project. When it comes to language features there really isn't much to separate Less and Sass as they offer similar functionality.
If you're not using a CSS pre-processor then now is a great time to get started, and I hope this blog post can help lean you in the direction of Sass. Truth be told I would still recommend Less as well. As long as your using a CSS pre-processor when dealing with CSS then your on the right path in my opinion.