Learning LESS: Variables

LESS takes your CSS and puts it on steroids

Alex Ball is proud to introduce LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS. According to Wikipedia, LESS is: a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.


The syntax for LESS is almost identical to CSS. And the creators of LESS were very smart and made LESS completely compatible with CSS which means you can write CSS in your LESS files. It’s basically the best of both worlds! Just remember to write your LESS files names as .less and not .css. Variables in LESS begin with the @ sign. What follows that can be any combination of letters and numbers, dashes and underscores. Once you’ve named your variable, follow with a colon (similar to CSS) and define the variable. This can include a hex code for a color (very common) or a string enclosed in quotes.


Be the first to write a comment

You must me logged in to write a comment.