Getting Started

Overview

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

/* ZUSS */ @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; @dark-orange: orange - #010203; div.hilite { color: @light-blue;} div.hilite2 { color: @dark-orange;}

/* CSS */ div.hilite { color: #6c94be;} div.hilite2 { color: #fea300;}

Mixins

/* ZUSS */ @border_radious(@radius: 4px) { border-radius: @radius; } div.rounded { @border_radious(); } button.rounded { @border_radious(3px); }

/* CSS */ div.rounded { border-radius: 4px; } button.rounded { border-radius: 3px; }

Nested Rules

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

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

Functions

/* ZUSS */ @nice_grey: #5B5B5B; @darken(@color, @diff: 10%): @color * (1 - @diff); div { color: @darken(@nice_grey); }

/* CSS */ div { color: #525252; }

Conditional Content

Include

/* ZUSS */ .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; } }

/* ZUSS */ @include another.zuss;

Download

• Download the binary distribution from here
• Get zuss.jar under the dist/lib directory of the binary distribution

Servlet Usage

• Copy zuss.jar to the WEB-INF/lib directory
• Add the following content to WEB-INF/web.xml

	<servlet>
		<servlet-name>ZUSS</servlet-name>
		<servlet-class>org.zkoss.zuss.ZussServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ZUSS</servlet-name>
		<url-pattern>*.zuss</url-pattern>
	</servlet-mapping>

For the configuration of the ZUSS servlet, please refer to the JavaDoc of org.zkoss.zuss.ZussServlet (which could be downloaded from here).

Command-line Usage

You could invoke the ZUSS compiler from the command-line.

java -jar zuss.jar foo.zuss

For a synopsis of standard options:

java -jar zuss.jar foo.zuss -h

Bug Reports and Feature Requests

Please post and follow the issues at GitHub.

Version History

Version	Date	Content