Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
---
layout: "post"
title: "Variable Interpolation"
date: 2014-08-04
description: "How to use variables in different contexts, interpolation of variables in selectors, properties, and values"
---
You can interpolate a variable anywhere - in the property, value, and even the selector.
<%- @code('Variable Interpolation', 'basic') %>
## Interpolation in `calc()`
Some preprocessors require more special treatment when using variables inside `calc()`:
<%- @code('Variable Interpolation', 'calc') %>
## Selectors interpolation
If you have a often-occuring selector pattern you can put it in a variable:
<%- @code('Variable Interpolation', 'selectors') %>
Less needs escaping when you have both a dot (`.`) and a hyphen (`-`) in a variable [because of reasons](https://github.com/less/less.js/issues/1328).
## Nested selectors interpolation
If you often find yourself extending selectors with the same pseudo selectors and/or modifier classes, then you can again use a variable like in the example above, when nesting though this won't work in Less.
<%- @code('Variable Interpolation', 'selectors nested') %>
An alternative way of achieving this is using the [@content directive](/content-directive) which supports Less.