LESS wiki

Prone to code duplication since there are no structures that allow code reuse like variables, classes, etc

More prone to errors. For instance, if we want to change color scheme we may need to change the same color in different places.

Lack of functions or ways to encapsulate and execute calculations

Deep cascading rules make it very hard to debug CSS and know where rules come from (mitigated somehow by modern browser)

Hard to scale

Problems with importing many css files, no support for asset handling

Easy to write bad, unmaintainable CSS

Easy to write erroneous CSS

By introducing:

variables to store css rules (like colors)

reusable components of CSS

improve the clarity of how rules cascade in CSS

allow calculations in CSS

support for asset handling

What is LESS

LESS defines itself as a Dynamic Style Sheet Language, that transcompiles to CSS. It introduces programming features to CSS but it is just a superset of CSS, that is, CSS is valid LESS.

Use LESS on the Browser

You can use less directly in the browser by linking a LESS stylesheet using the rel="stylesheet/less" attribute and adding the less.js library to your web page as illustrated below:

<html><head><linkref="stylesheet/less"type="text/css"href="css/styles.less"><!-- needs to be after the less stylessheets that need to be processed --><scriptsrc="js/less.js"type="text/javascript"></script></head>
...
</html>

This is not recommended in a production scenario since it involves an additional pre-processing stage when loading your web in the browser. It is much preferred to do this kind of pre-processing in the server and just serve pure CSS to the browser.

Use LESS in the Server

.NET and Visual Studio

You can easily integrate LESS into your development process in .NET and Visual Studio by installing it via NuGet:

PS>> Install-Package dotless

Once installed, all your less file will be automatically processed into CSS files. If you take a look at your Web.config you will be able to appreciate a new section called dotless that will contain the configuration to pre-process your less files (caching, minimizing, etc).

Node.js

LESS Basics

// import in less embedds less files into
// one single css file as opposed to making
// an additional roundtrip to get the extra
// css files
@import "morestyles"
@import "somemorestyles.less"
// You can easily declare variables in less by
// using this syntax
@baseFontSize: 12px;@accentColor: blue;
// This is a single line comment like in C#
/* This is a normal CSS comment */// we can nest rules
// which saves us from writing a lot of code
// and also help us visualize the CSS rules
#content{h1{color:@accentColor;}p{font-size:@baseFontSize;
// margin: 20px; It is commented out!!
}}

Would you like to receive more articles like this one on programming, web development, JavaScript, Angular, developer productivity, tools, UX and even exclusive content like free versions of my books in your mailbox? Then sign up to my super duper awesome inner circle.

Did Ya Know I've Written Some Books?

I have! The JavaScript-mancy series is the lovechild of three of my passions: JavaScript, writing and Fantasy. In the pages of each one of the books of the series you’ll find a breadth of JavaScript knowledge, delivered with a humorous and casual style of writing and sprinkled with Fantasy at every turn.

They are the weirdest and quirkiest JavaScript books you'll ever find. There's nothing out there quite like it.