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.