Caml Style Sheets
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

A CSS quotation mechanism for ocaml using camlp4.

This library started as a toy-project at very good CUFP tutorial by Jake Donham and Nicolas Pouillard. It is now in a working state for bigger projects.


Define two global CSS colors:

let color1 = <:css< black >>
let color2 = <:css< gray >>

Define the style for a button; we use function from the CSS API to generate cross-platform complex styles:

let button = <:css< 
   .button {
     $Css.gradient ~low:color2 ~high:color1$;
     color: white;

We can also use nested declarations to build modular styles:

let container button_style header_style = <:css<
   .container {
     background-color: green;

let mystyle = container button <:css< h1 { font-weight: bold; } >>


The parser is far for being perfect. For example, to write properties do not forget to add a space character after the colon (ie. foo: bar, not foo:bar)

Also, the following quotations quotations contain some ambiguities:

<:css< $foo$ $bar$ { ... } >>

Indeed, this can be interpreted as:

  • the declaration $foo$, followed by the declaration whose header is $bar$; or
  • the declaration whose header is $foo$ $bar$.

The parser considers the later interpretation. However, it is possible to use ; to separate declarations, so the former interpretation can be obtained by writing :

<:css< $foo$; $bar { ... } >>

To be consistent, ; may be added after any declaration.