Properties - JeremS/cljss-core GitHub Wiki

The rules part of the wiki doesn't explain the full capabilities of the proposed syntax. We have here a more detailed description.

cljss considers everything past the first element of a rule (simple rule or media query) declarations of css properties or subrules.

Css property names have to be clojure keywords, css property values can be pretty much everything except maps.

Property declarations

We can declare properties as succession of property names property values:

(css [:div :width :200px :height :100px])

gives:

div {
  width: 200px;
  height: 100px;
}

Lists, lazy-seqs and maps are spliced into the rule declaration:

(css [:div '(:width :200px :height :100px)])
; <=>
(css [:div (concat '(:width :200px) '(:height :100px))])
; <=>
(css [:div {:width :200px :height :100px}])
; <=>
(css [:div :width :200px :height :100px])

We can mix all those possibilities as in the example already use in rules:

(css [:#container
        :background-color :black              ; property name, property value pair
        (list :width "900px" :height "400px") ; spliced list
        :border ["1px" :solid :white]         ; property name, property value pair
        {:position :relative                  ; spliced map
         :top "30px"
         :left "30px"}
         :color :blue])

will give css similar to:

#container {
  color: blue;
  left: 30px;
  top: 30px;
  position: relative;
  border: 1px solid white;
  height: 400px;
  width: 900px;
  background-color: black;
}

More on property values

There is a bit more to see about css properties values. cljss will compile these folowing these rules:

• any Object is compiled as is string representation
• the compilation of a keyword gives the keyword name
• any Sequential is compiled as the space separated compilation of its contained values
• any set is compiled as the comma separated compilation of its values.

This way we can write rules like:

(css [:div.shadowed
       :box-shadow #{[:2px :2px :2px :black]
                     [:inset "2px" "2px" "2px" "grey"]}])

and get something like:

div.shadowed {
  box-shadow: 2px 2px 2px black, inset 2px 2px 2px grey;
}