Permalink
Cannot retrieve contributors at this time
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?
csspre/src/documents/variable-interpolation.html.md.eco
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
35 lines (19 sloc)
1.24 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- | |
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. |