The domain of Front-End development has been volatile forever, to say the least. Technologies supporting the domain have increased multifold and offer varied conveniences to the developers, which makes choosing between them no lesser than a Herculean task. However, once you have narrowed down your options, mastering them all can be an immensely informative process. Learning SASS from the very beginning was such a journey for me. From the existing CSS preprocessors (like LESS & Stylus), I picked SASS for its burgeoning popularity focusing on the following main aspects:

  • Reusability: The functional mode of writing stylesheets helps create re-usable method blocks with logical statements (much like programming language constructs), for example, conditional statements and loops.
  • Handy Functions: It comes pre-loaded with plenty of miniature functions such as colour manipulation, operators and parameter lists.
  • Compass Style support: Users can utilise the powerful Compass library with SASS for styling. Its core feature-set includes dynamic sprite-map generation, legacy browser hacks, and cross-browser support for CSS3 features.

In this post, I will introduce SASS as I draw parallels with CSS; differentiate between SASS and SCSS formats, its core features, and the available compilers & editors, which support SASS.

CSS preprocessors

Before delving into the specifics, let’s understand what a CSS preprocessor is. Jacob Gube at Sitepoint defines it simply as follows:

A CSS preprocessor helps you write maintainable, future-proof code and it will seriously reduce the amount of CSS you have to write

CSS preprocessor helps you save time in writing CSS code by offering constructs and templates that help you build it faster.

What is SASS?

SASS is a CSS preprocessor. It introduces a terser and function-driven way of writing CSS. All SASS files (.scss extension) are eventually compiled into CSS. These can also be condensed into minified versions as required (just as any other CSS file). SASS can be compiled either in command line or using GUI based applications such as Koala. I’ll get on to these a little later in the article.

Which editor do I use for SASS?

Because SASS is syntax specific and a regular text editor (Notepad, for example) would not offer syntax highlighting or code assistance, you may wonder if an editor exists to write SASS code. Unfortunately, there isn’t one designed specifically to compliment SASS development, however, you can download a syntax highlighting package for Sublime Text, which may alleviate your worries to a certain extent.

SASS vs. SCSS formats

The SASS syntax, also known as indented syntax, identifies code blocks via indentation. You don’t need to encapsulate properties and semicolons with curly braces for an element as you would with CSS. On the other hand, SCSS is a CSS-like syntax, which identifies grouped properties and semicolons (to separate them like in CSS) with curly braces as styles for elements. Let’s take an example to demonstrate their difference:

<!--SASS syntax-->

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

&nbsp;

body 

font: 100% $font-stack;

color: $primary-color;


 

<!--SCSS syntax-->

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

&nbsp;

body {

font: 100% $font-stack;

color: $primary-color;

}

Features of SASS – Drawing Parallels with CSS

  1. Variables – A variable in SASS holds any piece of information such as colour, font stack, etc. It can be reused throughout the stylesheet via reference. It is declared using the $ symbol.

SASS

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

&nbsp;

body {

font: 100% $font-stack;

color: $primary-color;

}

CSS

body {

font: 100% Helvetica, sans-serif;

color: #333;

}
  1. Nesting – CSS selectors can be nested in SASS just like you would for HTML elements. However, you don’t want to define too many overly nested rules as it may lead to overqualified CSS, which would be labourious to maintain.

SASS

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
 
    li { display: inline-block; }
 
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

CSS

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
nav li {
    display: inline-block;
}
 
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}
  1. Partials – SASS facilitates the creation of CSS snippets to be included in other SASS files called partials. They account for better modularisation and thereby, easier maintenance. Partials are typically designated with a leading underscore for example, _partial.scss, which indicates to the SASS compiler of a partial file. Use the @import directive to add partial files into other SASS files.
  1. Extend/Inheritance – The @extend directive is used to inherit a set of CSS properties and styles from one selector to another. It permits a selector to directly inherit all of the parent styles, eliminating the need to rewrite it. This is especially useful in component-based CSS architecture where components can be customised by extending their parent properties.

SASS

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    @extend .message;
    border-color: green;
}
.error {
    @extend .message;
    border-color: red;
}
.warning {
    @extend .message;
    border-color: yellow;
}

CSS

.message, .success, .error, .warning {
    border: 1px solid #cccccc;
    padding: 10px;
    color: #333;
}
.success {
    border-color: green;
}
.error {
    border-color: red;
} 
.warning {
    border-color: yellow;
}

  1. Operators – You can carry out mathematical operations on styles using SASS defined operators as addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).

SASS

article {
    float: left;
    width: 600px / 960px * 100%;
}

CSS

article {
    float: left;
    width: 62.5%;
}

SASS Mixins –

Mixins are group(s) of CSS declarations, which can be reused across your site. Along with declarations, you can also pass parametric values lending them more flexibility. One of the areas of their demonstrable use is in vendor prefixes. Bourbon is one of the simplest and lightweight mixin libraries available for SASS.

I would recommend all of you to try SASS out and leave your reviews in the comments section below. Not only does it help save time writing labourious code, but it also adds a novel paradigm to stylesheets, which is a natural progression for any programming language. I’ll leave you with a) a downloadable demo depicting SASS and its other constructs in action and b) some interesting applications, which support SASS, its accompanying mixin libraries, compiler applications and enhanced CSS Frameworks. Some of these are paid while the others are free to download and use:

  • Codekit: CodeKit is an all-in-one package featuring support for SASS, LESS, CoffeeScript, HAML, JavaScript and more. It is a paid software, although, a free trial is available for download.
  • Koala: Koala is one of the best GUI applications for SASS available in the open source market. It has been developed for Windows, Linux and Mac systems and even extends support to the Bourbon library.
  • Compass: Compass is a CSS authoring framework, which serves as an extension to SASS. Since it is written in Ruby, you would need to install Ruby Gem on your system to use it. It is a free product.
  • Scout: You use this application to compile your SASS files (.scss) to CSS (.css) without getting involved in the technicalities. It encapsulates a Ruby environment in itself, runs on Windows and Mac systems, lends support to Compass and also administers minimalist design. It is absolutely free to download and use.

Tags:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *