Getting Started"
From Documentation
m (→Overview) |
|||
Line 6: | Line 6: | ||
'''Variables''' | '''Variables''' | ||
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
+ | |- | ||
+ | | width="50%" | | ||
|- valign="top" | |- valign="top" | ||
| | | | ||
<source lang="CSS"> | <source lang="CSS"> | ||
+ | /* ZUSS */ | ||
@nice-blue: #5B83AD; | @nice-blue: #5B83AD; | ||
@light-blue: @nice-blue + #111; | @light-blue: @nice-blue + #111; | ||
Line 18: | Line 21: | ||
| | | | ||
<source lang="CSS"> | <source lang="CSS"> | ||
+ | /* CSS */ | ||
div.hilite { color: #6c94be;} | div.hilite { color: #6c94be;} | ||
div.hilite2 { color: #fea300;} | div.hilite2 { color: #fea300;} | ||
+ | </source> | ||
+ | |} | ||
+ | |||
+ | '''Mixins''' | ||
+ | {| border='1px' | width="100%" | ||
+ | |- | ||
+ | | width="50%" | | ||
+ | |- valign="top" | ||
+ | | | ||
+ | <source lang="CSS"> | ||
+ | /* ZUSS */ | ||
+ | @border_radious(@radius: 4px) { | ||
+ | border-radius: @radius; | ||
+ | } | ||
+ | |||
+ | div.rounded { | ||
+ | @border_radious(); | ||
+ | } | ||
+ | button.rounded { | ||
+ | @border_radious(3px); | ||
+ | } | ||
+ | </source> | ||
+ | | | ||
+ | <source lang="CSS"> | ||
+ | /* CSS */ | ||
+ | div.rounded { | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | button.rounded { | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | </source> | ||
+ | |} | ||
+ | |||
+ | '''Nested Rules''' | ||
+ | {| border='1px' | width="100%" | ||
+ | |- | ||
+ | | width="50%" | | ||
+ | |- valign="top" | ||
+ | | | ||
+ | <source lang="CSS"> | ||
+ | /* ZUSS */ | ||
+ | .bordered { | ||
+ | &.float { | ||
+ | float: left; | ||
+ | } | ||
+ | .top { | ||
+ | margin: 5px; | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
+ | | | ||
+ | <source lang="CSS"> | ||
+ | /* CSS */ | ||
+ | .bordered.float { | ||
+ | float: left; | ||
+ | } | ||
+ | .bordered .top { | ||
+ | margin: 5px; | ||
+ | } | ||
</source> | </source> | ||
|} | |} |
Revision as of 10:30, 11 November 2011
Overview
ZUSS (ZK User-interface Style Sheet) 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
/* ZUSS */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@dark-orange: orange - #010203;
div.hilite { color: @light-blue;}
div.hilite2 { color: @dark-orange;}
|
/* CSS */
div.hilite { color: #6c94be;}
div.hilite2 { color: #fea300;}
|
Mixins
/* ZUSS */
@border_radious(@radius: 4px) {
border-radius: @radius;
}
div.rounded {
@border_radious();
}
button.rounded {
@border_radious(3px);
}
|
/* CSS */
div.rounded {
border-radius: 4px;
}
button.rounded {
border-radius: 3px;
}
|
Nested Rules
/* ZUSS */
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
|
/* CSS */
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
|
Download
Servlet Usage
Command-line Usage
Java Usage
Version History
Version | Date | Content |
---|---|---|