Language
ZESS, inspired by LESS, is an extension to CSS. It is compatible with CSS, while allows to use variables, macros, nested rules, expressions, and Java methods with existing CSS syntax.
Variables
Variable Definition
@name: value; @name: (expression);
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 Usage
@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 Usage
@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;
}
Nested Rules
Example,
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
Outputs:
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
Function
Function Definition
@name (@argument-name: default-value, @argument-name: default-value): class-name @name (@argument-name: default-value, @argument-name: default-value): class-name method-name
Example,
@darken(@color, @diff): org.zkoss.zess.Utils
It assumes there is a Java class called org.zkoss.zess.Utils, and it has a method called darken with the following signature:
public static String darken(String arg1, String arg2) {
//...
}
First, it must return a string and the returned string will be outputed directly. Second, it could have any number of String-typed arguments. Third, it has to be a public static method.
If the function name is different from the method name, you could specify the method name at the end of the definition. Example,
@darken2(@color, @diff: 10%): org.zkoss.zess.Utils darken
Function Usage
@name(argument 1, argument 2)
Example,
@nice_grey: #5B5B5B;
div {
color: @darken(@nice_grey);
}
Outputs:
div {
color: #525252;
}
Expressions
(expression)
Example
div {
color: (@darken(@nice_grey + #111))
}
The expression must be enclosed with parentheses, ( and ). The supported operators include +, -, * and /.
Browser Dependent Expressions
(browser-condition: expression)
Example,
.box_shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
(gecko: -moz-box-shadow: @arguments);
(webkit: -webkit-box-shadow: @arguments);
}
Include
@include path
Example
@include another.zess