LESS Variables, Mixins, & Nesting


Posted by James Futhey on Thursday, July 24, 2014

LESS Variables Less variables allow us to avoid writing duplicate code, and to make "global" changes quick & effortless. The most common use of LESS variables is for color theming. Imagine your typical HTML5 webpage. Usually, you'll reuse a palette of 3-5 colors in a design, maybe with a few

LESS Variables

Less variables allow us to avoid writing duplicate code, and to make "global" changes quick & effortless. The most common use of LESS variables is for color theming.

Imagine your typical HTML5 webpage. Usually, you'll reuse a palette of 3-5 colors in a design, maybe with a few tints and shades of those base colors. But what happens if, for example, you want to change your maincolor? You could search and replace all occurences of that color, and then recalculate your tints and shades & varients of that color. Alternatively, using LESS, you could change them on the fly using variables.

Typically, variables are located at the beginning of the document (so that future changes are quick and easy), but this is not a restriction of the LESS syntax. The syntax for creating a LESS variable is as follows:

@variable-name: #fff;

Now, for example, you could replace all occurences of #fff in your code with @variable-name, and when you changed the variable at the top of your document, the changes would occur in multiple places.

@variable-name: #fff;
body {
  background-color: @variable-name;
}
a:hover {
  color: @variable-name;
}

LESS Mixins

Mixins are sets of properties which can be "mixed in" to other blocks of CSS (based on the DRY principal; Don't Repeat Yourself). If you've worked with classes and inheritance in other languages this will seem familiar.

In LESS, all we need to do to include one class (using the dot syntax) in another block of CSS is to reference it.

For Example:

.global-padding {
  padding: 10px;
}
#my-div {
  .global-padding;
}
.footer-div {
  .global-padding;
}

In this example, we created a css class 'global-padding'. Then, we included it's as a default inside of two other DOM elements using straightforward syntax.

Note: It does not matter if the DOM element exists or not, but beware that if the class was referenced in the DOM you would be making changes to the DOM itself.

LESS Nesting

Another timesaving feature of LESS that will help you write less code is nesting. In the following example, you'll see that we repeat #header several times:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

One way we could refactor this code is through nesting. LESS by default assumes all nested elements are child elements. See the example below:

#header {
color: black;
.navigation {
   font-size: 12px;
}
.logo {
   width: 300px;
}
}

This LESS would compile to the same CSS, but the LESS file is much easier to work with.

That's 90% of what you need to know to make your lives more productive and make your CSS more efficient with LESS! Enjoy!

cover: http://38.media.tumblr.com/76796874419b8de16c3297a013c16dd6/tumblrn9hy0iH7in1st5lhmo11280.jpg
subtitle:A Brief Introduction to LESS, Part II
category:CSS
subcategory:LESS

//www.gravatar.com/avatar/9217f68fb557d906a5b7c625bc8bf7dd?d=404
Web Developer
kidgodzilla.com

Thanks for reading this post! Follow our blog for instant updates. facebook: dgamr twitter: dgamr gplus: 112387059563392387400 pinterest: dgamr github: KidGodzilla

Tagged: Variables, Nesting, Mixins, Less, CSS

Samantha Theme
http://samantha.themespectre.com
Just a blogging platform. shortname: kidgodzilla