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;
}

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 Definition

(expression)