Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
36 lines (19 sloc) 1.24 KB
---
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.