ZUSS Reference/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 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)