Language"
m (→Macros) |
|||
Line 33: | Line 33: | ||
</source> | </source> | ||
− | = | + | =Mixins= |
− | == | + | ==Mixin Definition== |
@''name'' (@''argument-name'': ''default-value'', @''argument-name'': ''default-value'') { | @''name'' (@''argument-name'': ''default-value'', @''argument-name'': ''default-value'') { | ||
''ZESS content'' | ''ZESS content'' | ||
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. | ||
− | == | + | ==Mixin Usage== |
@''name''(''argument 1'', ''argument 2''); | @''name''(''argument 1'', ''argument 2''); | ||
Revision as of 03:08, 28 October 2011
ZESS, inspired by LESS, is an extension to CSS. It is compatible with CSS, while allows to use variables, macros, 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) { ZESS 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
(condition) { ZESS content }
Example,
.box_shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
(@gecko < 5) {-moz-box-shadow: @arguments);}
(@webkit) {-webkit-box-shadow: @arguments);}
}
Another example,
(@ie < 9) {
.shadow {
background: #888; zoom: 1; display: none;
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=true, ShadowOpacity=0.30)
}
}
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)
Example
div {
color: (@darken(@nice_grey + #111))
}
The expression must be enclosed with parentheses, ( and ). The supported operators include +, -, * and /.
Include
@include path
Example
@include another.zess