Language

ZESS, inspired by LESS, is an extension to CSS. It is compatible with CSS, while allows to use variables, mixins, 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;}

Mixins

Mixin Definition

@name (@argument-name: default-value, @argument-name: default-value) {
  ZESS 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.

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

Conditional Content

(condition) { ZESS content }

Example,

.box_shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  (@gecko < 5) {-moz-box-shadow: @arguments);}
  (@webkit) {-webkit-box-shadow: @arguments);}
}

Another example,

(@ie < 9) {
 .shadow {
	background: #888; zoom: 1; display: none;
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=true, ShadowOpacity=0.30)
 }
}

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 /.

Include

@include path

Example

@include another.zess