So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js"></script>
</head>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
No comments:
Post a Comment