Variables Back

Variable Interpolation (內插)

How about using variables despite of only values, such as selector names, property names, URLS and @import statements.

1. Selectors

/** Variables */
@my-selector: banner;

/** Usage */
.@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;

2. URLs

/** Variables */
@images: '../img';

/** Usage */
.item {
    background-image: url('@{images}/white-sand.png');

3. Import Statements

/** Variables */
@themes: '../../src/themes';

/** Usage */
@import '@{themes}/tidal-wave.less';

4. Properties

/** Variables */
@property: color;

/** Usage */
.widget {
    @{property}: #0ee;
    background-@{property}: #999;

5. Variable Names

@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.