Basics of SASS

Basic of SASS

Since Superman has extra power than a normal man, similarly SASS is a super-powered version of CSS. It is actually meant to make CSS more dynamic, organized and productive.

SASS is Syntactically Awesome Stylesheets. It's a CSS Preprocessor. It is written in Ruby and distributed by the Ruby package manager, RubyGems. However it can be implemented with other languages as well, like PHP, Java and C.

SASS consist of the following two syntax:

1. SASS: It contains indented code without braces and semicolons
2. SCSS: It is indented code with braces and semicolons

One can use either syntax depending on their practice. People who are familair with writing CSS have experienced with writing brackets and semicolons, so they can use SCSS.

Variable

Suppose you have more than 100 CSS files in your project and you want to change the text link color in the entire project. What you will do is, find and replace in the entire project using Dreamweaver or eclipse. It will be a tough job if someone has used the text color Red, #FF0000 or #F00.

In that scenario, variables are useful.

In SASS, we can create a variable for the text link color using $ and use it across the website. So if we want to change it, it requires only one change.

Example 1

$text-link: #FF0000;
a
   color: $text-link;

nav a {
color: $text-link;
}

 

Hierarchy

Hierarchy is an important feature of CSS. However it is a tedious job to maintain a long chain of hierarchy. SASS makes it easier. Child elements are added into parent elements, so that a structure can be easily understood. Hierarchy can be easily maintained in SASS.

Example 2

CSS
.main-container {
   width: 960px;
   margin: 0 auto;
}
.main-container .left-column {
    float: left;
    width: 600px;
}
.main-container .left-column .left-column-heading {
    font-size: 20px
}

SASS
.main-container {
   width: 960px;
   margin: 0 auto;

   .left-column {
      float: left;
      width: 600px;
      .left-column-heading {
          font-size: 20px
      }
   }
}

 

Mixins

Most of the CSS3 features are browser-specific and requires browser-specific prefixes. That creates a duplication of code in CSS. Mixins acts as a function; we just create them once then call them multiple times using a different parameter. Let's look at the following example:

Example 3

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

So wherever we want to apply a border radius then only one line will be required and we can pass any ineteger value as the parameter.

.box { @include border-radius(10px); }

Similarly we can use mixins for box-shadow, background image, text-shadow and so on.

Import

If we write the entire CSS in a single file then it becomes too lengthy and it will be hectic to maintain. Instead of this, we can separate this file into multiple files like header, footer, nav, font and so on. We can easily import this files using @import. The main benefit of SASS is that it compiles one single time though you have divided it into multiple files.

Example 4

Reset.scss
body, div, span, p {
    margin: 0;
    padding: 0;
}

Base.scss
@import Reset.scss
body {
    color: #000;
}

 

Inheritance

We can reuse the code using the Inheritance property. SASS has the same inheritance concept as in OOP. It allows us to share a set of CSS properties from one selector to the other using @extend.

Example 5

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

 

Operators

SASS supports math operators like:

+, -, /, * & %

That is also a useful feature and helps to make responsive websites.

Example 6

$container-width: 960px;
$font-size-normal: 16px;
.container {
    width: $container-width;
}
.left-column {
    width: $container-width – 300px;
H2  {
    font-size: $font-size-normal +4px;
}
}