Getting Started"
From Documentation
m (→Overview) |
m (→Overview) |
||
| Line 6: | Line 6: | ||
'''Variables''' | '''Variables''' | ||
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
| − | |- | + | |- valign="top" |
| width="50%" | | | width="50%" | | ||
| − | |||
| − | |||
<source lang="CSS"> | <source lang="CSS"> | ||
/* ZUSS */ | /* ZUSS */ | ||
| Line 29: | Line 27: | ||
'''Mixins''' | '''Mixins''' | ||
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
| − | |- | + | |- valign="top" |
| width="50%" | | | width="50%" | | ||
| − | |||
| − | |||
<source lang="CSS"> | <source lang="CSS"> | ||
/* ZUSS */ | /* ZUSS */ | ||
| Line 60: | Line 56: | ||
'''Nested Rules''' | '''Nested Rules''' | ||
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
| − | |- | + | |- valign="top" |
| width="50%" | | | width="50%" | | ||
| − | |||
| − | |||
<source lang="CSS"> | <source lang="CSS"> | ||
/* ZUSS */ | /* ZUSS */ | ||
| Line 84: | Line 78: | ||
margin: 5px; | margin: 5px; | ||
} | } | ||
| + | </source> | ||
| + | |} | ||
| + | |||
| + | '''Functions''' | ||
| + | {| border='1px' | width="100%" | ||
| + | |- valign="top" | ||
| + | | width="50%" | | ||
| + | <source lang="CSS"> | ||
| + | /* ZUSS */ | ||
| + | @nice_grey: #5B5B5B; | ||
| + | @darken(@color, @diff: 10%): @color * (1 - @diff); | ||
| + | |||
| + | div { | ||
| + | color: @darken(@nice_grey); | ||
| + | } | ||
| + | </source> | ||
| + | | | ||
| + | <source lang="CSS"> | ||
| + | /* CSS */ | ||
| + | div { | ||
| + | color: #525252; | ||
| + | } | ||
| + | </source> | ||
| + | |} | ||
| + | |||
| + | {| border='0px' | width="100%" | ||
| + | |- valign="top" | ||
| + | | width="50%" | | ||
| + | '''Conditional Content''' | ||
| + | | | ||
| + | '''Include''' | ||
| + | |} | ||
| + | |||
| + | {| border='1px' | width="100%" | ||
| + | |- valign="top" | ||
| + | | width="50%" | | ||
| + | <source lang="CSS"> | ||
| + | /* ZUSS */ | ||
| + | .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; | ||
| + | } | ||
| + | } | ||
| + | </source> | ||
| + | | | ||
| + | <source lang="CSS"> | ||
| + | /* ZUSS */ | ||
| + | @include another.zuss; | ||
</source> | </source> | ||
|} | |} | ||
Revision as of 10:36, 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;
}
|
Functions
/* ZUSS */
@nice_grey: #5B5B5B;
@darken(@color, @diff: 10%): @color * (1 - @diff);
div {
color: @darken(@nice_grey);
}
|
/* CSS */
div {
color: #525252;
}
|
|
Conditional Content |
Include |
/* ZUSS */
.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;
}
}
|
/* ZUSS */
@include another.zuss;
|
Download
Servlet Usage
Command-line Usage
Java Usage
Version History
| Version | Date | Content |
|---|---|---|