Compass A CSS Authoring Framework -Tutorial Savvy

“COMPASS” is another popular CSS Authoring framework.It is based on SASS.

It provides two powerful modules ‘COMPASS CORE‘ and ‘BLUEPRINT‘.

You can know more from the below link:-

http://compass-style.org/reference/compass/

In this Demo, “We will install the compass gem and attach the watcher to one of our project to monitor SCSS change“.

The Initial project strucure:-

The content inside my-markup.html file is as below,

<!DOCTYPE html>
<html>
<head>
<title>TS : Compass Watcher 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>
  </tbody>
 </table>

</body>
</html>

The my-style.scss file contains the SASS code 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;
  }
 
 }
}

COMPASS can be installed by issuing GEM command as below,

Let’s start the COMPASS watcher to watch the changes in the project.In the first run itself it detected that a my-style.scss file is present, So its create corresponding CSS file my-style.css in the stylesheets directory.Check the below screenshot,

It also creates a temporary cache directory to managing and monitoring changes.The directory name is ‘.sass-cache’.Check the below screenshot,

Let’s change the background color of even rows to YELLOW.We can see the log of monitoring and moving the changes from SCSS file to CSS file.Check the below screen,

Finally the output in browser will look like below screenshot,

Sep 10, 2013Sandeep

Compass A CSS Authoring Framework

Related

Sandeep