Learning LESS: Variables

May 3, 2012
CSS HTML
111 Shares
By

We continue on our journey of Learning LESS today as we dive in to the wonderful world of Variables. If you haven’t read Learning LESS: An Introduction, be sure to read that first to cover some intro to this topic.

Blog Series Roadmap

  1. An Introduction
  2. Using Variables
  3. Using Mixins
  4. Using Nested Rules
  5. Using Functions
  6. Divide and Conquer
  7. Put It Into Action

So let’s dive in to LESS Variables, and showcase some of what you can do with them.

The 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

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. Let’s take a look at a few variables and see how they’ll render once they’re compiled.

@blue: #00214D;
@red: #CF142B;
@white: #FFF;
@black: #000;
@baseFontSize: 15px;
@baseLineHeight: 22px;

Pretty simple, right? Now you can use those variables in any of your other LESS files throughout your project where you would use the hex code. This is a fantastic way to keep your code clean and easy to manage. For example, I like to set up a single LESS file that is just my variables, which includes font sizes, colors, headers, etc.

When you use your variables in your LESS files, they compile to be perfectly clean CSS. Let’s take a look.

h1 {
    color: @red;
}

h2 {
    color: @blue;
}

h3 {
    color: @black;
}

p {
    color: @black;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
}

Which compiles to…

h1 {
    color: #CF142B;
}

h2 {
    color: #00214D;
}

h3 {
    color: #000;
}

p {
    color: #000;
    font-size: 15px;
    line-height: 22px;
}

Setting Strings as Variables

Variables don’t have to be just colors or font sizes. We can also set strings to variables, just like you would in JavaScript or PHP. This can become extremely valuable when using Icon Fonts in your web design, as it’s best practice to set Icon Fonts with pseudo elements to maintain accessibility instead of just typing characters in a specific class element. Let’s take a look at variables as strings.

@name: "Alex Ball";
@description: "I love to write and code.";

a:before {
    content: @description;
}

When the code above is compiled, we get this.

a:before {
    content: "I love to write and code.";
}

If you’re looking into using icon fonts in your web designs along with LESS, definitely check out Chris Coyier’s great posts on icon fonts, how to use them accessibly, and the various fonts that are out there, both free and paid.

Wraping Up Variables

That concludes our discussion on variables in LESS, and while it was a shorter lesson, it’s extremely valuable and worth practicing some on your own. As I mentioned in the Introduction, go out and download LESS.app and try out using variables in your projects. You’ll be amazed at how quickly it can speed up development time and maintainability.

In the next segment of Learning LESS, we’ll dive in to Mixins, one of the most powerful advances in LESS.

Have questions on variables and how they work in LESS? Or having trouble getting your LESS files to compile correctly? Comment below and I’ll get to them as soon as possible!

See you next time.

Author: Alex Ball
Alex has been working in web design and development for over five years, and loves learning and expanding his skill set. A fan of CSS3 and HTML5, he also enjoys going old school with HTML (table) Emails.
  • http://twitter.com/alexloganlee Alex Logan Lee

    Thanks for exposing me to LESS. I’ll be sure to start using it in my ext project.

  • Vicok ableh

    This is good article, Nice :)

  • gbabula

    I had a problem I ran into recently while using LESS and I wonder if you have an answer for it.

    I had a few variables for font-size, font-family, line-height, etc..

    I wanted to use the shorthand font property in CSS, which always works flawlessly, however when I tried to use my LESS variables, LESS threw me an error.

    The code looked something like this (these aren’t the variables I used, but it helps demonstrate what I’m talking about):

    font: normal normal @font-size/@line-height @font-family;

    My guess is that it was failing because LESS thought I was trying to somehow divide the two variables, this is however completely valid CSS.

    Any ideas?

    • http://twitter.com/AlexBall12 Alex Ball

      Gbabula – You’re absolutely correct in your thinking. LESS is trying to divide your shorthand, so all you need to do is escape the slash and you’ll be good to go.

      To do this, simply put the ~ in front of your slash, and place the slash in quotes (“”).

      ~”/”

      So your line of code will be

      font: normal normal @font-size~”/”@line-height @font-family;

      Give that a shot and let me know if it works for ya!

      • gbabula

        Thanks Alex that work’s like a charm, looks like it’s adding an extra space between the slash (which only I would notice because I’m pretty anal with my code) but it works great.

  • Hkperfumes72

    Good Job, Very informative. thanks
    parfums

  • lanawylma

    I’ve been looking for tutorials on LESS all over. Thanks for putting it together!

  • Jakob Strauch

    isnt it pretty redundant to define a variable like

    @red: #CF142B; ? in a real scenario this could lead to the same problem as using the color code directly: if you want to change your color settings later (e.g. from red to some blue), you have to rename every occurance of this variable. a more meaningful name would be “baseColor” or “defaultColor”.

  • http://www.nx8.name/ nx8

    I am definitely bookmarking this page and sharing it with my
    friends.

  • Eugene

    Very interesting how did you get #000; code for color, since as far as I know less compiler has no respect for shorthand color code.

  • http://www.josegavidia.com joga

    Very useful guide… Thanks