SASS : A CSS Authoring Framework -Tutorial Savvy

“SASS” is also called as “Sassy CSS” and It stands for Syntactically Awesome Style Sheet.

It is used for Authoring CSS.It provides an awesome programmatic platform to a CSS developer.

To know more about SASS use the below link:-

http://sass-lang.com/about.html

In this Demo,“We will learn Sass Installation in windows, configuring SCSS Watcher and creating a sample SCSS Rule file”.

We need RUBY installed in our system to install SASS.To check ruby installation in your machine issue ruby with option -v.It will print the installed ruby version for your machine.Below screen shows this step,

or you can download and install ruby from the below link,

http://rubyinstaller.org/downloads/

SASS is an RUBY based package(Gem) Issue gem command with install and sass as parameters.The below screen shows this step,

Let’s create a basic java script project with two directory ‘sass‘ , ‘stylesheet‘ in our eclipse editor.Let’s create ‘my-style.scss’ file. to write all our sass based style rules.Also create a html file called ‘my-markup.html‘ for writing the HTML markups.Below screen shows the project structure,

To run SASS Watcher issue the sass command with –watch option followed by source and target separated by colon.The watcher observes that there is a file called ‘my-style.scss’ inside the sass file and immediately creates a corresponding css file called ‘my-style.css’ inside the stylesheet directory.Watcher is responsible for maintaining sync between these two directories.The below screen shows the sass watcher start,

In my-markup.html we have our HTML code which has a student details table.Also you can see the header part is calling my-style.css file.The code inside is as below,

<!DOCTYPE html>
<html>
<head>
<title>TS : SASS Watcher Demo</title>
<link rel='stylesheet' type="text/css"  href='./stylesheet/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>
  </tbody>
 </table>

</body>
</html>

The my-style.scss file contains the sass code rule for our markup.you can see it is written in a different syntax and a structured way.The code inside this scss file is as below,

table.ts-student-table{

    border-spacing:0;
    border-collapse:collapse;
    
 thead{
  background:#000;
  color:#fff;
 }
 tbody{
 
  tr.even{
   background:#cccccc;
  }
  
  tr.odd{
   background:#808080;
  }
 
 }
}

While writing these codes inside my-style.scss file the sass watcher observes the changes and pick it up calls the sass compiler.The sass compiler then converts the sass code to ‘Abstract syntx tree’ object notation. From this notation it can be converted to css code inside ‘my-style.css’.You can observer the command prompt of the watcher below,

Finally the css gets applied to our student table markup and output looks like below screen,

Sep 7, 2013Sandeep

SASS : A CSS Authoring Framework

Related

Sandeep