Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Compass: a CSS Authoring Framework

DZone's Guide to

Compass: a CSS Authoring Framework

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Compass is another popular CSS authoring framework. It is based on SASS. It provides two powerful modules: Compass Core and Blueprint. You can learn more here. 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 structure:

  •  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, it detected that a my-style.scss file is present, so it created corresponding CSS file  my-style.css in the stylesheets directory. Check the below screenshot:
  •  It also creates a temporary cache directory for 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:


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}