ZUSS Reference/Language

ZUSS (ZK User-interface Style Sheet) 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, the underscore (_) and the dash (-).

Variable Usage

@name

Example,

@nice_blue: #5B83AD;
@light_blue: @nice_blue + #111;

div.hilite { color: @light_blue;}

Outputs:

div.hilite { color:  #6c94be;}

As shown, the expression specified in a variable or a function will be evaluated first before generated. However, the operators in a CSS property's value won't be processed by the ZUSS parser. Rather, it is output directly since they are valid CSS3 expressions. For example, here are some examples of CSS3 properties:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}
p { font-size: min(10px, 3em) }

Thus, if you want an expression to be evaluated at the server side (i.e., by the ZUSS parser), you have to define it as a function.

Mixins

Mixin Definition

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

CSS selector { ZUSS content }

Example,

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

Outputs:

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

Conditional Content

@if (expression) { ZUSS content }

@if (expression) {
  ZUSS content
} @elif (expression) {
  ZUSS content
} @else {
  ZUSS 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.zuss.Utils;

It assumes there is a Java class called org.zkoss.zuss.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.zuss.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.zuss;