Rules - JeremS/cljss-core GitHub Wiki

Rules

Rules are represented with vectors, the first element being a selector, the rest can be property declarations or nested rules. For instance, the rules:

	(css [:section :color :black]
		   [:div :color :white])

will give the css:

section {
  color: black;
}
div {
  color: white;
}

The properties can be a chain of a mix and match of key values, maps or lists in any order. The rule:

(css [:#container :background-color :black
             (list :width "900px" :height "400px")
             :border ["1px" :solid :white]
             {:position :relative
              :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;
}

This way we can create mixins directly in clojure:

(defn css-float [side]
  {:float side})

(def default-box
  '(:padding ["0px" "20px"]
    :margin-left "10px"))

(css [:#nav (css-float :left) default-box])

generates:

#nav {
  margin-left: 10px;
  padding: 0px 20px;
  float: left;
}

Media queries

There is a support for media queries similar the one in sass.

(css (media :screen
       [:#container :width :1000px]))

generates:

@media screen {
  width: 1000px;
}

Nested rules

We can also nest rules "à la" scss, stylus etc...

[:#container
  :border "1px solid black"
  :padding-left "30px"

  [:a :color :green]

  [:section
    :font-size "1em"
    ["p::first-letter"
      :font-size "2em"]]]

gives something like:

#container {
  padding-left: 30px;
  border: 1px solid black;
}
  #container a {
    color: green;
  }
  #container section {
    font-size: 1em;
  }
    #container section p::first-letter {
      font-size: 2em;
    }

It also works with media queries:

(css [#{:div :section}
         :background-color :blue
         :width "800px"

         [:p
           :font-size "12pt"

           (media "(max-width: 500px)"
                 :font-size "5pt"
                 [:a :color :green])]

        (media "(max-width: 400px)"
               :width "400px")])

generates:

div, section {
  width: 800px;
  background-color: blue;
}
  section p, div p {
    font-size: 12pt;
  }
    @media (max-width: 500px) {
      div p a, section p a {
        color: green;
      }
      section p, div p {
        font-size: 5pt;
      }
    }
  @media (max-width: 400px) {
    div, section {
      width: 400px;
    }
  }