Introduction to Sass

What is Sass?

Sass stands for Syntactically Awesome Stylesheets

Sass is a CSS preprocessor which makes your work simple by facilitating you with variables, mixins, inheritance and ton of cool features that help you to write codes in a much less time. It can be pretty helpful for creating nice & neat code.

iap23717

Using Sass

Sass consists of two syntax:

  1. Sass
  2. SCSS

Sass is the original syntax, called “The indented Syntax”. This syntax doesn’t require curly braces and semicolon that are a require in CSS. Using newlines and indentation(two white spaces), Sass is able to read and compile as if they were there:

p
  color: tomato
div
  width: 100%

SCSS – “Sassy CSS” is newer syntax that uses block formatting same as CSS. SCSS is uses the curly brackets to identify code blocks and semicolon to separate lines in blocks:

$font-family:  Arial, Helvetica, sans-serif;
body{
	font-family: $font-family;
}

How it Works?

Sass is command line CSS compiler that reads and compiles the codes to clean and structured CSS that you have write in .sass or .scss. For example,

$color: black;
body{
     background: white;
     color: $color;
}

Would compiled to..

body{
	background: white;
	color: black;
}

Some Features of Sass

The advantages of using Sass are the drivers behind the usage which is:

  • Implementing the DRY(Don’t Repeat Yourself).
  • Adding dynamic programming functionality instead of a very static language: CSS
  • Code Reusability(Inheritance)

Let’s get familiar with Compass

Compass is an extension of Sass. It has its own compiler so, you use compass watch command instead of sass –watch.

It is a CSS framework that contains large collection of mixins and functions that you will find incredibly useful. This will generate a set of codes in your CSS file with the values you pass as parameters. For example,

@mixin border-radius($br){
     -webkit-border-radius: $br;
     border-radius: $br;
}
div{
     @include border-radius(10px);
}

Would compiled to..

div{
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

Variables

Sass provides way to be able to use variables within CSS before it is compiled, allowing for re-usable data. The Sass variables begin with dollar sign($).

$color: purple
p
   color: $color
$color: purple;
p{
     color: $color;
}

Output in .css will be

p{
     color: purple;
}

Nesting

This is one of the more useful features of Sass along with the variables. It allows you to target particularly nested HTML components such as navigation:

nav
  /* Some Style */
  ul
    /* Some Style */
    li
      /* Some Style */
      a
        /* Some Style */
nav{
  /* Some Style */
  ul{
    /* Some Style */
    li{
      /* Some Style */
      a{
        /* Some Style */
      }
    }
  }
}

And .css file will be:

nav {
  /* Some Style */
}
nav ul {
  /* Some Style */
}
nav ul li {
  /* Some Style */
}
nav ul li a {
  /* Some Style */
}

@import

CSS has @import functionality but each time you use @import in CSS it creates another HTTP requests. In Sass, it avoids to creating additional HTTP requests because files are imported and concatenated on compile rather than browser run-time.

@import "compass/reset";

Your .css will be:

html, body, div{
     margin: 0;
     padding: 0;
     border: 0;
     font: inherit;
     font-size: 100%;
     vertical-align: baseline;
}
.....

Mixin

Mixin is a very brilliant feature of Sass and i personally love it. The excellent example of this feature is, when you need to use CSS property that has a vendor prefixes. For example, border-radius, box-shadow and many other.

@mixin border-radius($br)
  -webkit-border-radius: $br
  border-radius: $br
div
  @include border-radius(10px)
@mixin border-radius($br){
     -webkit-border-radius: $br;
     border-radius: $br;
}
div{
     @include border-radius(10px);
}

CSS Result:

div {
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

Operators

Like many other programming languages, Sass has operator to perform basic math operation in your CSS.

$width: 960px
div
  width: 300px / $width * 100%
$width: 960px;
div{
  width: 300px / $width * 100%;
}

Calculation result in CSS

div {
     width: 31.25%;
}

Extend(Inheritance)

Most of all programming language has this feature called “inheritance”. Using @extend, you can share CSS properties from one selector to another so it helps keep your Sass very DRY

.zero-out
  padding: 0
  margin: 0
ul
  @extend .zero-out
  list-style: none
.zero-out{
  padding: 0;
  margin: 0;
}
ul{
  @extend .zero-out;
  list-style: none;
}

Would compiled to:

.zero-out, ul {
     padding: 0;
     margin: 0;
}
ul {
     list-style: none;
}

Sass is very easy to use and understand. I swear that, once you understand the Sass’ methods and syntax, you’ll never want to go back to writing static CSS again.

More Resources

4 Replies to “Introduction to Sass”

  1. John

    Hi, nice article. I look at the example after the title “How it works” and it seems to be wrong.

    $color: black;
    body{
    background: white;
    color: $black;
    }

    .. shouldn’t it be body { color: $color; } ?

Leave a Reply

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