SASS with Sinatra

Have started looking onto how to use use stylesheets with Sinatra. The easiest way way is to have a top level folder called Public with your main.css file.

This can be referenced from all pages as

< h t m l>
   < h e a d>
      < t i t l e> example < / t i t l e>
      < l i n k href="/main.css" rel="stylesheet" type="text/css" />
   < / h e a d>

Standard stylesheets have no have variables, they say they do but I could not get them to work. So I have started to look at compass which is a framwork for CSS! it based on haml which is another templating language like erb.

The Main Compass page. Integrating it with Sinatra.

Also see github for a basic example of using Sinatra and Compass.

Example of some SASS:

!cdark =    rgb(145, 129, 107)
!cdarker =  rgb(125,  91,  95)
!clight =   rgb(141, 189, 168)
!clighter = rgb(23 , 206, 143)

body 
   background-color: #{!cdark}

p
   color: #{!clight}

Compass uses SASS and is built on the blueprint layout system.
Blueprint Tutorials.