CSS

Learning LESS: Variables

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.

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. More articles by Alex Ball
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress