Authoring in traditional CSS3 feels like a lion trapped in a cage situation. Among many different extensive and useful programming languages available for web development, styling the web has consistently been a difficult if not often frustrating task. CSS is void of many popular, useful, and frankly logical code paradigms that we are already used to. Throughout three iterations CSS has remained largely a game of playing with inheritance and mind-numbing repetition.
Enter less.js which is now the standard for most popular web projects. Less is a CSS pre-processor that extends the CSS language by adding many common programming paradigms. Essentially, Less transforms CSS into the full-fledged language it should be.
Image may be NSFW.Clik here to view.
Client vs. Server
Less can be run on both the client and server side. This is an incredible ability to have and is generally a new concept to the programming world. However, Less on client-side is to be used with great care despite being the most common learning practice for programming using it. Putting the extra processing requirement on a client is not recommended, and using this method is best done in the development stage. Ensure native CSS files processed from .less files are used in the production copy of a project. In order to make this easy for production builds, you can include a Less step in task automation. Using a tool like Grunt to automate the processing is easy to do, and is now common place for developers.
However, for small projects or development you can include less.js within your header along with your .less files to unleash it’s potential quickly and easily.
If you’re not using {less}, you’re creating more work for yourself.
Added features include:
- Variables
- Mixins
- Nested rules
- Media query bubbling / Nested media queries
- Operations
- Functions
- Namespaces and accessors
- Scope
- Comments
- Importing
Simple Usage
In order to use less, you simply need the less.js file, and a javascript enabled environment. less files have the extension .less rather than .css and are referenced in the header.
To begin, include these lines in the head of your html file
<link rel=”stylesheet/less” type=”text/css” href=”style.less” />
<script src=”less.js”></script>
Now in your aptly-named style.less file, you can start to program using less.js
Variables are as simple as
@variablename: value;
For example, within style.less to create a variable for the colour of my text within the element “textbox”:
@crazy-yellow: #FFFF66;
#textbox {
color: @crazy-yellow;
}
When my page loads, It will look identical to writing
#textbox {
color: #FFFF66;
}
The one of many features of adding a variable is extremely important. This can make an entire layout themable (changing the colours of the layout easily by variable overrides), can make authoring and tracking palettes simple, and in short will greatly reduce the amount of times you check for syntax mistakes.
This is just one implication of using less, and you can already see the benefit it has to both beginner designers as well as large projects. This is used in many popular projects like Webmaker, and Atom.
Less is open source and uses an Apache 2 license which means you are able to include it in personal, company (both internal and external), and commercial goods. Yes, you can even include it in your own package. The only caveat? You must attribute (and rightfully so). So what’s stopping you?
Do yourself a favour, give Less a try.
Find out more about less including docs.