Language
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 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;
}
</soure>
=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,
<source lang="CSS">
@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