styles

Styles

Styles are represented in HashMap so it's very trival to extend with merge and if:

(def style-a {:line-height 1.6
              :color (hsl 0 0 80)})

(def style-b
  (merge style-a
    {:font-size "16px"}
    (if (> size 0)
      {:font-weight "bold"})))

The keys have to be keywords, the values can be either of keywords, numbers or strings. Also I prepared a function called hsl as a helper.

In Respo, style updates are defined with direct accessing to el.style:

(defn add-style [target op]
  (let [style-name (dashed->camel (name (key op)))
        style-value (val op)]
    (aset (.-style target) style-name style-value)))

(defn rm-style [target op]
  (let [style-name (dashed->camel (name op))]
    (aset (.-style target) style-name nil)))

(defn replace-style [target op]
  (let [style-name (dashed->camel (name (key op)))
        style-value (val op)]
    (aset (.-style target) style-name style-value)))

For convenience, I collected my frequent used styles in a package called respo-ui. You can find more in the source code.

Actually there's one more solution to specify CSS content, the <style> element:

(style {:innerHTML ".demo {color: red;}"})

It may look awkward but sometimes quite useful for pseudo classes.