Mixins

Sometimes you need to define a block of CSS properties for reuse, without binding it to a given rule. That’s when mixins are needed. You can join together sets of properties and rules creating a mixing that can be applied later to any rule.

  (def no-blanks
    (mixin
      :padding 0
      :margin 0))

  (rule "fieldset"
    no-blanks
    width: (% 100)
    :color (col :CCC))

Other use of mixins is for grouping sets of properties, you could say an unnamed mixin:

  (rule ".cell"
    :display :block
    :background-color (col :#ccc)
    (if using-borders?
      (mixin
        :padding "3px"
        :border [:solid :1px border-color])))

Great results are obtained combining mixins with function calls

  (defn link-colors
    ([normal] (link-colors normal nil))
    ([normal hover]
      (mixin
        :color normal
        (if visited (rule "&:visited" :color visited))
        (if hover   (rule "&:hover" :color hover)))))

  (rule "a"
     (link-colors "#00c" "#0cc"))

Mixing are the primary source of code reuse in cssgen. You could create your library of reusable mixins, and your CSS will become incredibly semantic and legible. In the future, I’ll try to generate a cssgen version of compass that will give access to a large number of useful mixins.