Frontend Development with SASS and Compass: Introduction

Introduction

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor which gives you an opportunity to do amazing things with your stylesheets. Interesting huh!?

What is Sass?

The Sass website define Sass as:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable style sheets.(1)

Yes, yes wait ! I know you are gonna ask me “What’s wrong with regular CSS?”. Regular CSS is also correct, there is nothing wrong in it, they are great with all its ability and quality, but they are missing some essential and simple elements. Sass core philosophy is DRY i.e. Don’t Repeat Yourself as it saves time and effort when writing code.

Example: Use Variables (only define a value once)

When designing a website, many times we need to declare the value of a color in CSS. Mostly we define colors as hex (hexadecimal) value like #fd3397. It is really difficult to remember hexadecimal values, especially with multiple colors in a website. Sass resolves big pain of our life by just defining the colors as variables. The concept of variable is as same as in other programming languages which refers to a defined values. The variables in Sass is defined as:

$pink: #fd3397;
$green: #3bdabb;

So if we need to change the colors, we just need to update the variable and everything takes care of itself. We don’t need to manually search and replace values by hand. – Woo Hoo !

Sass is not really a replacement for CSS, it an extension for it. Sass really shines in big projects as it helps us create style-sheets which are easier to maintain.

FYI: We are expecting that you are familiar with CSS, HTML, since Sass and Compass won’t fill the gap in your knowledge. And we’ll assume that you’re familiar with padding, margins, display properties, other CSS elements and responsive @media queries etc.

There are two syntax-es to write Sass code – SCSS and original Sass.

SCSS: A more CSS-like way to write Sass

SCSS, stands for Sassy CSS, is one the syntax-es we use to write Sass. If you’re familiar with CSS, its pretty easy to read then. We use selectors, classes, and IDs. We open and close curly brace to start and end the declaration block, and we separate out declarations with semicolons.Whatever extra is the added functionality.

Example:

$colorRed: red;
.scss-style {
    color: $colorRed;
    font-size: 13px;

    span {
        font-size: 12px;
    }
}

Original Sass: A stripped-down way to write Sass(7)

Before SCSS, there was Original Sass, which strips out some of the unnecessary elements of CSS and SCSS. Original Sass can be compiled just the same as SCSS, via the Sass engine. In Sass curly braces aren’t needed.

Example:

$colorRed: red;
.sass-style
    color: $colorRed;
    font-size: 13px;

    span
        font-size: 12px;

Sass helps you to implement your ideas faster, with less friction. Before we get into syntax and features of Sass, let’s take a look at the picture below. When using Sass, the Sass engine compiles your stylesheet source files into 100% pure CSS during your development workflow. You deploy static CSS as you normally would; you just benefit from Sass language features to write that CSS much faster and maintain it more easily.

SASSFig1: The Sass authoring and compilation workflow (2)

Now, what is Compass?

The Compass website describes itself as follows:

Compass is an open-source CSS Authoring Framework.(3)

Compass is a Sass framework designed to make the work of designing the web smooth and effective. Similarly like Rails as a web application framework for Ruby which we remember as Ruby on Rails, Compass is a collection of helpful tools and battle-tested best practices for Sass.

Compass is consists of three main components:

  1. a collection of Sass mixins and utilities,
  2. a system for integrating with application environments, and
  3. a platform for building frameworks and extensions.

Expanding the picture diagram from earlier, let’s see how Compass fits into our development work-flow.

CompassFig2: Compiling with Compass (4)

Example:

Previously, we used to define rounded corners in such a way:

.rounded-border {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

With Sass’s amazing framework, Compass, we get dozens of free mixins. Instead of recalling prefixes and related syntax-es, we can write the following code using compass:

.rounded-border {
    @include border-radius(4px);
}

And that would output exactly the same CSS on compile. It’s a huge time saver.

Installing Sass and Compass

Both Sass and Compass are command-line tools built on top of the Ruby programming language. To use them you’ll need to have Ruby installed as well as a basic understanding of your computer’s command line. Sass and Compass can be installed on Linux, Windows and Mac OS X.

Installation on Windows(5)

Windows doesn’t come with Ruby, so unless you have previously installed it, you’ll need to do so now. It only takes a few minutes. Just follow few steps:

  1. On windows 8.1, you can launch the command prompt from the Windows menu (bottom left) by right click on it. Also, you can press ctrl + r (to open run window), and then type cmd and press enter.
  2. From the command prompt, type ruby -v and then press enter. If Ruby isn’t installed, the command prompt will give you an error message `ruby is not recognized as an internal or external command, operable program or batch file`. If ruby is installed, it’ll print out the version of Ruby you have installed. The version should be greater than or equal to 1.8.7. If its 1.8.6 or below, please install Ruby with the following instructions:
  3. Go to Ruby Website Downloads Page(6) and download the latest stable version of Ruby.
  4. Install Ruby by through the guided installer’s steps.
  5. Now close your command prompt and launch it again by following step 1, and verify that Ruby is installed by typing ruby -v and press enter.ruby

    Fig3: Ruby Installed

  6. Ruby comes with a system for installing Ruby-based software called `RubyGems`. Both Sass and compass can be easily installed using this system. To install the later version of Sass:
    > gem install sass
    > gem install compass.
    In each case, you should see output that looks like:

    Successfully installed sass-3.3.8
    1 gem installed
    Installing ri documentation for sass-3.3.8…
    Installing RDoc documentation for sass-3.3.8...
  7. After installing, you should verify that the applications are installed correctly by running the following commands:
    > sass -v

    Sass 3.3.8 (Maptastic Maple) > compass -v
    Compass 0.12.6 (Alnilam)
    Copyright © 2008-2014 Chris Eppstein
    Released under the MIT License.
    Compass is charityware.
    Please make a tax deductable donation for a worth case: http://umdf.org/compass

    sass compass

    Fig4: Sass and Compass Installed

OK- now we’ve got everything in place, are you ready to get Sassy?

Let’s create our first Sass Compass project

To start using Compass in a new project, open up your terminal and run the following:

> compass create my-project

This will create the my-project directory if it doesn’t already exist and fill it with the following files:

my-project/
    config.rb
    - Sass/ 
        - ie.scss
        - print.scss
        - screen.scss
    - stylesheets/
        - ie.css
        - print.css
        - screen.css

Note: If you don’t pass a directory to the compass create, it’ll use your current directory.

In config.rb, you’ll make changes to Compass configuration like asset locations and compression level. The sass directory contains some starter stylesheets that you can edit, rename or toss out completely, but this is where Sass stylesheets will live. Finally, there is a stylesheets directory where compiled CSS files are written.

Few important commands for Compass are as follows:

  • compass create – create a new Compass project
  • compass init – Add compass to an existing project
  • compass clean – Remove generated files and caches
  • compass compile – Generate your stylesheets
  • compass watch – Watch Sass files and regenerate on change
  • compass stats – See statistics about your stylesheets
  • compass validate – Validate your generated CSS.
  • compass version – Display the version, license, and so on.
  • compass help Commands with description, available frameworks and extensions and global options for the compass command.

Reference:

(1): http://sass-lang.com/

(2) & (4) & (5): Netherland, Wynn. Sass and compass in action. Manning, 2013.

(3): http://compass-style.org

(6): http://rubyinstaller.org/downloads/

(7) Catlin, Hampton, and Michael Lintorn Catlin. Pragmatic guide to Sass. Pragmatic Bookshelf, 2011.

About Mohit Bhansali

A hyperactive mind with a passion for getting acquainted with the latest technology.

Comments

  1. Deepika Gupta says:

    Well written. Everything in detail which is really useful at least for me since I am beginner.

Trackbacks

  1. […] There is a lot of duplication due to vendor prefixes. SASS, allows you to define mixins for repetitive code. Read more about SASS at Frontend Development with SASS and Compass: Introduction. […]

Speak Your Mind

*