Less Is More

August 4, 2011 Posted by deeroy in Web Programming

With all the hype surrounding CSS3 and the shifting of designing styles using lesser images in templates but taking full advantage of CSS3 effects, you might find LESS a useful tool to extend the capabilities of CSS3. Don't you ever wished things will be a lot simpler without having to add + replace for all changes you made while coding your stylesheets.Take this for example:

/* 	---Variables---
 * Variables are defined by inserting
 * '@' in front of the defined variable name
 */
 
@blood-red: #ad0101;
@border-size: 3px;
 
#cool-box {
	border-left: @border-size, solid, @blood-red;
}
 
/*	---Output---	*/
 
#cool-box {
	border-left: 3px, solid, #ad0101;
}

Note by using the variables blood-red instead (or anything to describe whatever you want like ugly-black, favourite-blue etc) you just add in the variable in your codes and later you might find that the blood-red needs to be darker then you just change the variable at the top (#ad0101 to maybe #810606 ) and you are set.This is just one simple example of what LESS can do and imagine how easy it is to standardized a special quote box or just any text box with CSS3( using a variable like text-box and setting all the css3 shadow effects and etc etc)