Getting Started With {Less}

.less is a great way to create programable css files using variables.

Here’s how it works:

You either pre-compile your .less files into .css files using a less command line compiler OR you can process .less files on the browser as your page loads.

To compile .less files on your browser, you must first include the .less files via <link rel=”stylesheet/less” type=”text/css” href=”…”> tags followed by including the less.js library file, like so:

myFirst.less
@myPrimaryColor: #0068AD;

.btn {
background-color: @myPrimaryColor;
}

Page Before it Loads:
<html>
<head>

<link rel=”stylesheet/less” type=”text/css” href=”myFirst.less”>
<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js”></script>


<head>
<body>

</body>
</html>

Once .less processes each of your .less files, it will create a <style> tag including the processed css code on your page, like so:

Page After It Loads
<html>
<head>

<link rel=”stylesheet/less” type=”text/css” href=”myFirst.less”>
<style type=”text/css” id=”less:myFirst”>
.btn {
background-color: #0068AD;
}
<style>

<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js”></script>

<head>
<body>

</body>
</html>

IMPORTANT: Don’t forget semicolons, .less will tell you there’s an error via “ParseError: Unrecognised input” BUT not where the error is at.

Global Variables

.less allows for global variables in multiple ways.

1. You can define your global variables within one central .less file and simply include it via “@import” within your other .less files, like so:

myConfig.less
@myPrimaryColor: #0068AD;
myFirst.less
@import “myConfig.less”;

.btn {
background-color: @myPrimaryColor;
}

2. You can also define global variables within less = { globalVars: {} } before including the .less library which makes the variable available to all of your .less files, like so:

<html>
<head>

<link rel=”stylesheet/less” type=”text/css” href=”myFirst.less”>
<script type=”text/javascript”>
less = {
env: “development”, // note that I am using this to prevent .less from caching
async: false,
fileAsync: false,
functions: {},
useFileCache: false,
globalVars: {
myPrimaryColor: ‘#3292CD’
}

};
</script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js”></script>

<head>
<body>

</body>
</html>

Keep in mind that .less caches the <style> tags it creates, which I dislike very much because if you plan on dynamically updating variables, you’ll find it impossible to do so with the built in .less cache. A way to prevent this is to “trick” .less into thinking your in development mode via env: “development”.

Special mention for .NET developers

If you’d like to bundle your .less files, @Styles.Render() will not work. You’ll need to use @Styles.RenderFormat() in order to specify a rel and type attribute to the <link> tag:

@Styles.RenderFormat(@”<link href=””{0}”” rel=””stylesheet/less”” type=””text/css”” />”, “~/Content/less”) // in this example, ~/Content/less is the Bundle Virtual Path

Within your .NET project you’ll also need to add a “.less” MIME type either via ISS Manager our in your Web.config, like so:

Web.config
<system.webServer>
<staticContent>
<mimeMap fileExtension=”.less” mimeType=”text/css” />
</staticContent>
</system.webServer>

AND you will need to specify a Build Action for .less files set to Content, which can be done by right clicking on the file within your .NET Solution Explorer.

Alternative to JQuery Templates

After searching for options on how to develop in JavaScript with templates and finding only “custom” solutions, I decided to see if I could build my own. Turns out, there is no need to build anything since JQuery already allows for a “template” solution. Essentially, all we have to do is have a “template” in a hidden div which we can read via JQuery and either search/replace values or find elements and inject HTML or append items.

Below is my solution to templates, using only JQuery.