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
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:


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}