variable-interpolation.html.md.eco

---
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.