Language
ZUSS (ZK User-interface Style Sheet)[1] 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: @nice_blue;}
Outputs:
div.hilite { color: #6c94be;}
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;