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

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
}

Expressions

(expression)