This is a very simple how to on coding with LESS which is designed to get you some quick introduction into LESS without getting too much technical detail.
First create two file call vars.less and nav.less as below:
// file: vars.less
// variables
@coWhite: #ffffff;
@coOffWhite: #eaeaea;
@coGrey: #eeeeee;
@coGreyDark: #999999;
@coPurple: #5a5a93;
@coPurpleLight: #a1a1cc;
@coBlue: #333399;
@coBlueLight: #b0e0e6;
@mxWidth: 99%;
@minHeight: 80%;
@hdrFont: 2em;
@roundSize: 4px;
.PadRight(@size: 8px) {
padding-right: @size;
}
.PadVertical(@size: .0px) {
padding-top: @size;
padding-bottom: @size;
}
.AlignVertical(@fontsize: 13px; @height: 36px) {
/* valign */
.PadVertical();
font-size: @fontsize;
line-height: @height;
}
.RoundedCorner(@radius: @roundSize) {
-moz-border-radius: @radius;
border-radius: @radius;
}
.BarNav(@color: @coPurple; @size: 13px; @height: 36px ) {
background: @color;
.RoundedCorner();
.AlignVertical(@size, @height);
}
// file: nav.less
@import "vars.less"; // import the above file
.topnav {
.BarNav(@coBlue);
}
.bottomnav {
.BarNav(@coPurple);
}
.hmenu {
.BarNav(@coPurpleLight; 10px; 22px);
.PadRight();
text-align: right;
}
{/code}
Then use LESS compiler to compile LESS code into CSS code and the output will look like below:
{code}
// output in file: nav.css
.topnav {
background: #333399;
-moz-border-radius: 4px;
border-radius: 4px;
/* valign */
padding-top: 0px;
padding-bottom: 0px;
font-size: 13px;
line-height: 36px;
}
.bottomnav {
background: #5a5a93;
-moz-border-radius: 4px;
border-radius: 4px;
/* valign */
padding-top: 0px;
padding-bottom: 0px;
font-size: 13px;
line-height: 36px;
}
.hmenu {
background: #a1a1cc;
-moz-border-radius: 4px;
border-radius: 4px;
/* valign */
padding-top: 0px;
padding-bottom: 0px;
font-size: 10px;
line-height: 22px;
padding-right: 8px;
text-align: right;
}
As you can see above, you can use LESS to define variables and functions and then call it to execute those variables and functions. So the code in LESS is much less than the code in CSS. This efficiency will be greatly appreciated when you have a lot of code in CSS. You can even set to compile in minimize CSS format to increase the speed of your site when loading CSS.
There are much more in LESS that you can do but I will let you explore further with the following links:
. http://lesscss.org/
. http://winless.org/ (I use this compiler)
Enjoy!