Twitter Updates

Sunday, 31 January 2010

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)

background-color: #{!cdark}

color: #{!clight}

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

No comments: