The css variables support is achieved by the processor named CssVariablesProcessor . As its name states, this processor works only with CSS resources and it does the following:
- parse the css and search for variables declaration (@variables token) and variable usage.
- replace all declared variables with declared variable values.
- remove variable declaration, making the result a valid css.
The processor can be used as both: pre processor & post processor.
- When used as a pre processor, the scope of the declared variables is reduced to a single css file.
- When used as a post processor, the scope of the declared variables is the 'group' level (all css resources from the processed group).
With this feature you can write a css like this:
@variables {
mainBackground: red;
mainColor: #fff;
mainBorder: solid black 2px;
contentHeight: 100px;
alt1-background: yellow;
alt2-background: #de5500;
}
#variablesHolder {
background: var(mainBackground);
height: var(contentHeight);
border: var(mainBorder);
}
#variablesHolder em {
background: var(alt1-background);
border: var(mainBorder);
}
#variablesHolder span {
background: var(alt2-background);
border: var(mainBorder);
color: var(mainColor);
}
which will be processed and will produce the following result:
#variablesHolder {
background:red;
border:2px solid black;
height:100px;
}
#variablesHolder em {
background:yellow;
border:2px solid black;
}
#variablesHolder span {
background:#DE5500;
border:2px solid black;
color:#FFFFFF;
}