The LESS.js JavaScript library allows us to extend our CSS with dynamic behavior such as variables, mixins, operations and functions.
The following code sample shows how simple it is to create new variables assigned with values so that we could reuse them in our code.
The following is the LESS code.
@myblue: #4C65BC;
.stuff {color:@myblue}
The following is the simple HTML code that uses the LESS code.
<!DOCTYPE html>
<html>
<head>
<title>less.js variables demo</title>
<link rel="stylesheet/less" type="text/css" href="variablesdemo.less" />
<script type="text/javascript" src="less-1.1.0.min.js"></script>
</head>
<body>
<h1 class="stuff">nice stuff</h1>
bla bla bla
<h1>other stuff</h1>
bla bla bla
</body>
</html>
The following video clip overviews this code sample, shows its execution and explains it.
You can find many more video clips that explain how to use LESS.js and show its power in my new LESS Basics course. The free community version is available at http://abelski.lifemichael.com
