Getting Started with Sass and Compass

Sass and Compass makes writing stylesheets more flexible, more maintainable and faster to produce than ever before. Many large companies like BBC and LinkedIn, widely use Sass and Compass to produce their CSS. After I have done some research about CSS preprocessors, such as Sass, LESS or Stylus, I found out Sass is a better and more powerful language than the other two. You can see at Sass vs. Less by Chris Coyier (2012) post that compares Sass and LESS with great explanation.

This post aims for beginners who willing to start using Sass but dont know where to start.

Why need Sass and Compass?

CSS is a declarative language that does not have variables or reusable functions like in a programming language. Sass and Compass provide these capabilities while they are producing CSS file in the end.

Then, why dont we just write CSS directly if it ends up producing CSS?

The answer is that Sass and Compass provide programming logic in defining style sheets and it makes CSS writing faster, easier and more maintainable than ever. So, let's see what Sass and Compass can do.

Variables

You dont have to worry about remembering hex colour values of your site and replacing multiples times when editing. With Sass, you can just define the colours as variables like following.

$material-red-500: #F44336;
$material-Amber-500: #FFC107;
$material-Lime-A200: #EEFF41;

The dollar sign is indication of the start of a variable. The value comes after the variable name like other programming language except Sass use : instead of =. After declaring your colour variables like above, you can use them anywhere in the Sass style sheet like this:

.primary-color {
    color: $material-red-500;
}

In Sass, compile means producing CSS from Sass.

After compiling, the following CSS is generated.

.primary-color {
    color: #F44336;
}

Automatic RGBA colour values and conversions

With Sass, it is saxy, Woo!. RGBA (Red Green Blue Alpha) and HSLA (Hue Saturation Lightness Alpha) can be generated from a hex colour values for modern browsers. It means you only need one type of colour value for compatibility in all browsers like following:

.accent-color-90 {
    color: $material-Amber-500;
    color: rgba($material-Amber-500, 0.9);
}

On compile, the following CSS is produced.

.accent-color-90 {
    color: $material-Amber-500;
    color: rgba(255, 193, 7, 0.9);
}

No vendor prefixes

Compass, which is a Sass's authoring framework, makes easy in writing CSS prefixes and associated syntaxes with use of mixins like this:

.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc;  
   -moz-box-shadow: 3px 3px 5px 6px #ccc; 
        box-shadow: 3px 3px 5px 6px #ccc;
}

In Sass, you need to write only:

.shadow {
     @include box-shadow(3px 3px 5px 6px #ccc);  
}

Nesting rules

Besides, Sass allows nested rules within each other like this to provide alternative pseudo states for hover and active states of a set links inside a nav element.

nav {
    a {
      color: $material-red-500;
      &:hover   {   color: $material-Amber-500;     }
      &:visited {   color: $material-Lime-A200;     } 
      }
}

When it is complied to CSS:

nav a {
      color: $material-red-500;
}
nav a:hover {
      color: $material-Amber-500;
}
nav a:visited {
      color: $material-Lime-A200;
}

Simple media queries

All responsive websites needs lot of media queries for the different breakpoints in a design. As you may already know about CSS media queries, the following stylesheet changes the typography at a certain viewport/device width described.

 @media only screen and (min-width: 280px) and (max-width: 479px) {
 .h1 {
   font-size: 1.1em;
 }
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
.h1 {
   font-size: 1em;
 }
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
.h1 {
   font-size: 0.9em;
 }
} 

With Sass, the media queries can be simply written like this:

h1 {
   @include MQ(XS) {
     font-size: 1.1em;
   }
   @include MQ(S) {
     font-size: 1em;
   }
   @include MQ(M) {
     font-size: 0.9em;
   }
}

Variables of XS, S and M are width value that defined elsewhere and they are used inside a mixin called MQ. Thanks to the MQ mixin, media queries can be placed easily wherever they are needed.

Automatic compression of CSS

This is not the end of Sass can do. Sass can be configured to compiled the CSS in a number of formats and on of which is compressed of course.

I hope this covers up what Sass and Compass can do in CSS styling and why should we use them as a CSS preprocessor. Let's keep going on what are Sass and Compass and how do we use in your web development.

What is Sass?

The original description of Sass can be found at the website of Sass.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Sass has always been programmer friendly as it started life in the Ruby community. However, this has also made Sass difficult for non-programmers to get their head around ever since.

Sass also supports two syntaxes: .sass extension, which is the original one that is terse and based on indentation, and .scss extension, which is more verbose than the original indent-based syntax but similar to existing CSS. Moreover, Sass is free to use.

What is Compass?

According to the Compass website, Compass is an open-source CSS Authoring Framework.

Compass was the first Sass-based framework and enable Sass get access to lots and lots of reusable patterns and tools for easily creating CSS. It lets using a single syntax for all CSS3 goodies like box-shadow, gradients, columns, and transforms, and produces cross-browser compatible CSS without headaches.

"Pro tip — 'If your CSS is complicated enough to need a compiler or pre-processor, you're [sic] doing it wrong!'" Andrew Clarke (http://stuffandnonsense.co.uk)

Installing Sass and Compass

As OS X already has Ruby installed, you can directly install Sass and Compass through Command line. For Windows, you must install Ruby first by getting installer from Official Ruby Downloads.

  1. Open Terminal and paste the following command:

    $ sudo gem install compass

  2. Enter your admin-level password when it prompts for use password.

  3. Use sudo gem install -n /usr/local/bin compass instead if you get an error like this in El Capitan:

    ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass

  4. It will install Compass along with its dependency Sass and its relatives.

  5. Type sass –v and compass -v to get their installed version on your machine. The Sass version is Sass 3.4.22 (Selective Steve) and Compass is Compass 1.0.3 (Polaris) at time of writing this post.

Creating a Sass and Compass project from the Command line

You can easily create a Sass and Compass project from the command line tool by typing the following command.

$ compass create sites/myFirstSassProject

Tips - In OS X, I used to create a folder name called Sites under home directory to store all of my web development projects. For a good practice, you should too. OS X will automatically change the icon of the Sites folder to safari icon that means it senses you will use this to host your web projects.

When you enter compass create {folder/location}, it will create a new project folder containing files like following screenshot.
Sass and Compass Project Files

So, What are those generated files in a Compass project for?

  • config.rb file contains the project's configuration default values such as its included folders' name and location, and the compression style of the generated CSS.
  • sass folder stores the Sass files that we will write styles into.
  • stylesheets folder contain the compiled CSS files that Sass will generated. However, these folders' name, sass and stylesheets are the default name created by Compass. You can rename these folders into what you want to call.

I think that would be enough of Sass and Compass to get started and installed on your machine. Thank you for reading this post and see you in my next post about Setting Up a Sass and Compass Project.

Nay Win Myint

A JavaScript full-stack web developer, also interested in Android application development and Graphic design.

United Kingdom