Doing More With Less

HTML

index.html

In this demo we're using LESS CSS to style the border-radius and the box-shadow.

<head> 
    …
   <link rel="stylesheet/less" href="main.less" type="text/css" />
   <script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
    …
</head>

CSS

style.less

At the top of 'style.less' we set create four variables and give them values.

@box-x: 0px;
@box-y: 0px;
@box-blur: 8px;
@box-color: #999999;
    

We can now replace the values in our CSS with our new variables


.content {
 	box-shadow:  @box-x @box-y @box-blur @box-color; /* opera */
	-webkit-box-shadow:  @box-x @box-y @box-blur @box-color; /* safari/chrome */
	-moz-box-shadow:  @box-x @box-y @box-blur @box-color; /* firefox */
}
    

Now if we need to tweak the color of our box-shadow, a single change to the @box-color variable at the top of our style document will change it across the entire document. In this simple demo, that change takes place in three places, but that could easily be dozens places in a more complex design.