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 Usage

@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 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;
}
</soure>

=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,

<source lang="CSS">
@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 /.

Browser Dependent Expressions

(browser-condition: expression)

Example,

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

Include

@include path

Example

@include another.zess