.Less automating style sheets - A ruby parser for leaner css

4.3.10
CSS or cascading style sheets are basically developed as a format or style specifier. It helps to specify the`lok and feel of elements in  HTML documents. One insufficiency in CSS is the lack of programming language constructs like Nesting, Looping, Variables etc that could have made development easier. Obviously CSS working Group is aimed at developing CSS as it is now and they have no reason to worry about these. HTML also have the same problems which invoked the necessity to use scripting languages like PHP, RUBY, PERL etc.
LESS is a RUBY based parser developed by Alexis Sellier supporting the use of variables, mixins, nesting etc while keeping the basic CSS syntax intact. Such styles are stored in .less files and can be parsed to CSS on the fly or you can manually parse and use the generated CSS file. LESS also minifies the CSS which makes page loading faster.
You can get it from their web-site  LESS - Leaner CSS

 
Here are some examples of the use of LESS.

Variables
@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}


Mixins
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners(10px);
}

Nested Rules
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}

Operations
@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}

Hope to see more of such code to save the CSS coders.

Related Posts by Categories



Widget by Hoctro | Jack Book