Language"
m (moved ZESS Reference/Language/ to ZUSS Reference/Language/) |
|||
Line 1: | Line 1: | ||
− | + | __TOC__ | |
− | Unlike LESS, the processing of | + | ZUSS (ZK User-interface Style Sheet)<ref>ZUSS is inspired by [http://lesscss.org LESS] and [http://sass-lang.com/ SASS]. Unlike LESS and SASS, the processing of ZUSS file won't require the JavaScript or Ruby interpreter.</ref> 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. |
+ | |||
+ | {{references}} | ||
=Variables= | =Variables= | ||
Line 38: | Line 40: | ||
==Mixin Definition== | ==Mixin Definition== | ||
@''name'' (@''argument-name'': ''default-value'', @''argument-name'': ''default-value'') { | @''name'' (@''argument-name'': ''default-value'', @''argument-name'': ''default-value'') { | ||
− | '' | + | ''ZUSS content'' |
} | } | ||
Line 110: | Line 112: | ||
=Conditional Content= | =Conditional Content= | ||
− | @if (''expression'') { '' | + | @if (''expression'') { ''ZUSS content'' } |
@if (''expression'') { | @if (''expression'') { | ||
− | '' | + | ''ZUSS content'' |
} @elif (''expression'') { | } @elif (''expression'') { | ||
− | '' | + | ''ZUSS content'' |
} @else { | } @else { | ||
− | '' | + | ''ZUSS content'' |
} | } | ||
Line 163: | Line 165: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | @darken(@color, @diff): org.zkoss. | + | @darken(@color, @diff): org.zkoss.zuss.Utils; |
</source> | </source> | ||
− | It assumes there is a Java class called org.zkoss. | + | It assumes there is a Java class called org.zkoss.zuss.Utils, and it has a method |
called darken with the following signature: | called darken with the following signature: | ||
Line 182: | Line 184: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | @darken2(@color, @diff: 10%): org.zkoss. | + | @darken2(@color, @diff: 10%): org.zkoss.zuss.Utils#darken; |
</source> | </source> | ||
Line 211: | Line 213: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | @include another. | + | @include another.zuss; |
</source> | </source> |
Revision as of 01:31, 2 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, 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;}
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
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;