Language
From Documentation
ZESS, inspired by LESS, is an extension to CSS. It is compatible with CSS, while allows to use variables, macros and expression with existing CSS syntax.
Variables
Variable Definition
[@name: value]; [@name: [#Expressions];
Example,
@nice_blue: #5B83AD;
@light_blue: (@nice_blue + #111);
The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore.
Variable Use
@name
Example,
@nice_blue: #5B83AD;
@light_blue: (@nice_blue + #111);
div.hilite { color: @nice_blue;}
Outputs:
div.hilite { color: #6c94be;}
Macros
Macro Definition
@name (@argument-name: default-value, @argument-name: default-value) { CSS content }
Example,
@border_radious(@radius: 4px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore.
Macro Use
@name(argument 1, argument 2);
Example,
@border_radious(@radius: 4px) {
border-radius: @radius;
}
div.rounded {
@border_radious();
}
button.rounded {
@border_radious(3px);
}
Outputs:
div.rounded {
border-radius: 4px;
}
button.rounded {
border-radius: 3px;
}
Expressions
(expression)