Understanding SASS Features -Tutorial Savvy

SASS(Syntactically Awesome Style Sheet) is an CSS authoring framework.

You can see my previous post for basic explanation and installation of SASS.

There are many features offered by SASS framework.Some of them are:-

   — Nesting
             —Variables
             —Mixin
             —Inheritance
             —Placeholder
             —SASS Script

In this Demo,“We are going to understand Nesting,Variables, Mixin and Inheritance implementation for authoring a SCSS file”.

The HTML markup that we have used for styling is in my-markup.html file.This file has a HTML Table DOM with student details rows. The code is shown below,

<!DOCTYPE html>
<html>
<head>
    <title>TS : SASS Feature Demo</title>
    <link rel='stylesheet' type="text/css" href='./stylesheets/my-style.css'>
</head>
<body>

<table class='ts-student-table'>
    <thead>
    <tr>
        <th>NAME</th>
        <th>ROLL</th>
        <th>MARK</th>
        <th>COUNTRY</th>
    </tr>
    </thead>
    <tbody>
    <tr class='odd'>
        <td>Sandeep</td>
        <td>001</td>
        <td>235</td>
        <td>India</td>
    </tr>
    <tr class='even'>
        <td>John</td>
        <td>002</td>
        <td>335</td>
        <td>US</td>
    </tr>
    <tr class='odd'>
        <td>Stephen</td>
        <td>003</td>
        <td>135</td>
        <td>UK</td>
    </tr>

    <tr class='even'>
        <td>Philip</td>
        <td>004</td>
        <td>139</td>
        <td>Germany</td>
    </tr>
    <tr class='odd'>
        <td>Sandeep</td>
        <td>001</td>
        <td>235</td>
        <td>India</td>
    </tr>
    <tr class='even'>
        <td>John</td>
        <td>002</td>
        <td>335</td>
        <td>US</td>
    </tr>
    <tr class='odd'>
        <td>Stephen</td>
        <td>003</td>
        <td>135</td>
        <td>UK</td>
    </tr>

    <tr class='even'>
        <td>Philip</td>
        <td>004</td>
        <td>139</td>
        <td>Germany</td>
    </tr>
    <tr class='odd'>
        <td>Sandeep</td>
        <td>001</td>
        <td>235</td>
        <td>India</td>
    </tr>
    <tr class='even'>
        <td>John</td>
        <td>002</td>
        <td>335</td>
        <td>US</td>
    </tr>
    <tr class='odd'>
        <td>Stephen</td>
        <td>003</td>
        <td>135</td>
        <td>UK</td>
    </tr>

    <tr class='even'>
        <td>Philip</td>
        <td>004</td>
        <td>139</td>
        <td>Germany</td>
    </tr>
    </tbody>
</table>

</body>
</html>

NESTING:

—This feature is very useful for authoring css.As We know ‘SPECIFICITY‘ while styling HTML elements takes more precedence.The generic thumb rule for css ‘More Generic the Specificity More it takes the Precedence’.

—As we know while authoring css we face lot of situation where we need to override some css classes for many times and as development goes long ways we face situation where lot of redundant css code in our code-base.Which makes the developer‘s life hell.SASS makes it more simple through nesting.

—Below fiddle is a simple example(.SCSS) for applying style using nested rule,

VARIABLE:

—This feature is useful when some css property value ‘FREQUENCY‘ is higher.It means some value used repeatedly.

— There are many scenarios in development where we want to match the color of different HTML element.In this scenario SASS provides the global variable which can be used across the css file.

—Below fiddle is an simple example(.SCSS) of variable declaration and its call in different places,

MIXIN

—This feature is helpful for the scenarios where you need to do some process based on ‘CONDITION‘ dynamically.It is similar to a function where we do some process and return different response based on response.

—For Example, There are many situation where we need different font styling for different parts of web application like header, content,footer,sidebar and content title.

–A MIXIN is declared using @mixin annotation.A MIXIN can be used by calling it through @include annotation.

—Bellow fiddle is simple example(.SCSS) file showing MIXIN declaration and its call in two different places:-

INHERITANCE:

—This feature provides the inheritance capability to a css developer.It helps in ‘DERIVING‘ style properties from different css classes.

—In some scenarios while writing CSS styles we need to incorporate different style from multiple classes.In this situation SASS selector inheritance is more useful.

—To inherit from a css class @extend annotation is used.

—Below fiddle shows a simple example how a class is inheriting/extending another css class,

Finally the below SCSS code shows all the SASS feture use to style our student list HTML markup,

/*VARIABLE DECLARATION: common css property values are declared as global
 * to use in multiple places and maintains similarity in styling
 */
$headerBackground: #000;
$yellowBackground: #FFCC00;
$greyBackground: #808080;

/*MIXIN DECLARATION: A mixin is similar to a function
  * which return a set of
  * css property configured dynamically
  */
@mixin myFont($fontFamily, $fontSize, $fontColor) {
  font-family: $fontFamily;
  font-size: $fontSize;
  color: $fontColor;
}

table.ts-student-table {

  .headertext {
    font-weight: bold;
  }
  thead {
    /*VARIBLE CALL:replaces the value of the variable*/
    background: $headerBackground;
    color: #fff;
    /*INHERITANCE: derives the style from headertext class*/
    @extend headertext;
  }

  tbody {
    tr.even {
      /*MIXIN CALL:calling a mixn is simlar to calling a function*/
      @include myFont(Georgia, 10px, #0000ff);
      background: $yellowBackground;
    }
    tr.odd {
      @include myFont(arial, 10px, #ff0000);
      background: $greyBackground;
    }
  }
}

The CSS output of above SCSS file is as below,

/*myFont: is a mixin, simpar to a function 
which return a set of 
css property configured dynamically*/
/* line 14, ../sass/my-style.scss */
table.ts-student-table .headertext {
  font-weight: bold;
}
/* line 17, ../sass/my-style.scss */
table.ts-student-table thead {
  background: black;
  color: #fff;
}
/* line 24, ../sass/my-style.scss */
table.ts-student-table tbody tr.even {
  font-family: Georgia;
  font-size: 10px;
  color: blue;
  background: #ffcc00;
}
/* line 28, ../sass/my-style.scss */
table.ts-student-table tbody tr.odd {
  font-family: arial;
  font-size: 10px;
  color: red;
  background: gray;
}

Below fiddle shows the converted css file with HTML markup and its result ,

The output will look like below screenshot,

Sep 18, 2013Sandeep

Understanding SASS Features

Related

Sandeep