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.

Unlike LESS, the processing of ZESS file won't require the JavaScript interpreter.

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

@if (expression) { ZESS content }

@if (expression) {
  ZESS content
} @elif (expression) {
  ZESS content
} @else {
  ZESS content
}

Example,

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

Another example,

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

Function

Function Definition 1

@name (@argument-name: default-value, @argument-name: default-value): expression;

It defines a function with an expression. Example,

@darken(@color, @diff): @color * (1 - @diff);

Function Definition 2

@name (@argument-name: default-value, @argument-name: default-value): class-name ;
@name (@argument-name: default-value, @argument-name: default-value): class-name # method-name ;

It defines a function imported from a Java method. 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;
}

Include

@include path ;

Example

@include another.zess;