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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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:


Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}