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
Thanks for reading this post! Follow our blog for instant updates. facebook: dgamr twitter: dgamr gplus: 112387059563392387400 pinterest: dgamr github: KidGodzilla
