Language"
Line 36: | Line 36: | ||
div.hilite { color: #6c94be;} | div.hilite { color: #6c94be;} | ||
</source> | </source> | ||
+ | |||
+ | 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: | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | section { | ||
+ | float: left; | ||
+ | margin: 1em; border: solid 1px; | ||
+ | width: calc(100%/3 - 2*1em - 2*1px); | ||
+ | } | ||
+ | p { font-size: min(10px, 3em) } | ||
+ | </source> | ||
+ | |||
+ | 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 [[#Function|a function]]. | ||
=Mixins= | =Mixins= |
Revision as of 08:23, 4 November 2011
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;}
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;