Over a million developers have joined DZone.

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>
<title>TS : Compass Watcher Demo</title>
<link rel='stylesheet' type="text/css"  href='./stylesheets/my-style.css'>
 <table class='ts-student-table'>
   <tr class='odd'>
   <tr class='even'>
   <tr class='odd'>
   <tr class='even'>
  • The my-style.scss file contains the SASS code as below:
  • 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.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}