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;