Language"
m (→Expressions) |
m |
||
Line 16: | Line 16: | ||
The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore. | The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore. | ||
− | ==Variable | + | ==Variable Usage== |
@''name'' | @''name'' | ||
Line 51: | Line 51: | ||
The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore. | The name must be composed of letters, numbers, and the underscore. The name may only begin with a letter and the underscore. | ||
− | ==Macro | + | ==Macro Usage== |
@''name''(''argument 1'', ''argument 2''); | @''name''(''argument 1'', ''argument 2''); | ||
Line 82: | Line 82: | ||
=Function= | =Function= | ||
==Function Definition== | ==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 | ||
+ | </source> | ||
+ | |||
+ | It assumes there is a Java class called org.zkoss.zess.Utils, and it has a method | ||
+ | called darken with the following signature: | ||
+ | |||
+ | <source lang="java"> | ||
+ | public static String darken(String arg1, String arg2) { | ||
+ | //... | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | 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, | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | @darken2(@color, @diff: 10%): org.zkoss.zess.Utils darken | ||
+ | </source> | ||
+ | |||
==Function Usage== | ==Function Usage== | ||
+ | @''name''(''argument 1'', ''argument 2'') | ||
+ | |||
+ | Example, | ||
+ | <source lang="CSS"> | ||
+ | @nice_grey: #5B5B5B; | ||
+ | |||
+ | div { | ||
+ | color: @darken(@nice_grey); | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | Outputs: | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | div { | ||
+ | color: #525252; | ||
+ | } | ||
+ | </source> | ||
+ | |||
=Expressions= | =Expressions= | ||
==Expression Definition== | ==Expression Definition== |
Revision as of 07:09, 27 October 2011
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;
}
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,
@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 Definition
(expression)