Defining rules

CSS rules are defined using the rule function. The first argument is the selector and the rest is a list of properties name/value pairs, or nested rules

  (rule "ul#nav, ol"
    :color :black
    :background-color :#ddd
    :padding [:1px "2px" (px 3) 0])

This will generate

ul#nav, ol {
  color: black;
  background-color: #ddd;
  padding: 1px 2px 3px 0;
}

As you can see, property values could be strings, keywords, integers, or any other type that can be printed using clojure.contrib.strib.as-str. For multiple value properties, you have the option to use a sequence of values, like in the padding property above. This is useful when one or more of the values are obtained using a var or a function call:

(rule "#list"
  :padding [0 "5px" (calculate-bottom-padding 0 5) left-padding]) 

You can nest rules and the selector will be generated accordingly.

    (rule "#main, #secondary"
      :padding "10px"

      (rule "h1"   ; this will generate a rule for "#main h1, #secondary h1"
        :color :blue)

      :margin 0)   ; more properties here

Sometimes in the nested rule, you need the parent rule selector, you can use & and it will get replaced

    (rule "a"
      :color "#00C"

      (rule "&:hover"  ; this will generate a rule for a:hover
        :color "#0CC"))

In that case, you could simply write (rule "a:hover" but, if the second rule comes from a reusable function & becomes very useful:

    (def hover (rule "&:hover" :color :#0CC))

    (rule "a.button"
      :color "#00C"
      hover)

    (rule "a.big"
       :font-size (em 2.1)
       hover)