Css Builder

A ruby interface for creating CSS files; LESS and SASS planned;

Installation

gem install css_builder

Usage

require "css_builder"
css = CssBuilder.new

css.div(:id => "hello", :class => "world") {
  color "green"
  background_color "blue"
}

css.table([], [:tag => "tr"], [:tag => "td", :nth_child => "odd"]) do
  border "1px #345 solid"
  background_color "#efefef"
end

css.comment! "This is a magical momment"

css.value! # outputs =>

div#hello.world {
  color : green;
  background-color : blue;
}

table tr td:nth-child(odd) {
  border : 1px #345 solid;
  background-color : #efefef;
}

/* This is a magical momment */

###

css = CssBuilder.new

css.class!("astro", [], [:class => "stars", :nth_child => 2]) {
  color "green"
  background_color "blue"
}

css.value! # outputs =>

.astro .stars:nth-child(2) {
  color : green;
  background-color : blue;
}

###

css = CssBuilder.new

css.id!("bears", [:class => "grizzly"], [:class => "claws", :hover => nil]) {
  background_color "red"
  font_family "Sharp"
}

css.value! # outputs =>

#bears.grizzly .claws:hover() {
  background-color : red;
  font-family : Sharp;
}

###

css = CssBuilder.new

css.div([], [:selector => "~"], [:tag => "span"]) {
  border "1px"
}

css.value! # outputs =>

div ~ span {
  border : 1px;
}

LESS support

The LESS templating language has limited support right now. You can use it in the following way.

###

css = CssBuilder.new

css.div {
  font_size "1.2em"
  class!("roger") {
    color "green"
  }
  a {
    text_decoration "none"
    self.&(:hover => nil) {
      color "#333"
    } 
  }
}

css.value! # outputs =>

div {
  font-size : 1.2em;
  .roger {
    color : "green";
  }
  a {
    text-decoration : "none";
    &:hover() {
      color : "#333";
    }
  }
}

Variables

###

css = CssBuilder.new

@css.variable!("color", "#4D926F")

@css.id!("header") {
  color variable!("color")
}

css.value! # outputs =>

@color: #4D926F;

#header {
  color: @color;
}

Mixins

###

css = CssBuilder.new

@css.mixin!("rounded-corners", ["radius", "5px"]) {
  border_radius variable!("radius")
  _webkit_border_radius variable!("radius")
  _moz_border_radius variable!("radius")
}

@css.id!("header") {
  mixin! "rounded-corners"
}

@css.id!("footer") {
  mixin!("rounded-corners", "10px")
}

css.value! # outputs =>

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Contributing to css_builder

Copyright © 2012 Justin Derrek Van Eaton. See LICENSE.txt for further details.