Language"
m (correct highlight (via JWB)) |
|||
(18 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{ZUSSReferencePageHeader}} | |
− | + | {{Deprecated|url=https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling}} | |
− | + | __TOC__ | |
=Variables= | =Variables= | ||
Line 14: | Line 14: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | @ | + | @nice-blue: #5B83AD; |
− | @ | + | @light-blue: @nice-blue + #111; |
</source> | </source> | ||
Line 25: | Line 25: | ||
Example, | Example, | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | @ | + | @nice-blue: #5B83AD; |
− | @ | + | @light-blue: @nice-blue + #111; |
+ | @dark-orange: orange - #010203; /*orange is a standard color.*/ | ||
− | div.hilite { color: @ | + | div.hilite { color: @light-blue;} |
+ | div.hilite2 { color: @dark-orange;} | ||
</source> | </source> | ||
Line 35: | Line 37: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
div.hilite { color: #6c94be;} | div.hilite { color: #6c94be;} | ||
+ | div.hilite2 { color: #fea300;} | ||
+ | </source> | ||
+ | |||
+ | =Nested Rules= | ||
+ | |||
+ | ''CSS3 selector'' { ''ZUSS content'' } | ||
+ | |||
+ | Example, | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | .bordered { | ||
+ | &.float { | ||
+ | float: left; | ||
+ | } | ||
+ | .top { | ||
+ | margin: 5px; | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | Outputs: | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | .bordered.float { | ||
+ | float: left; | ||
+ | } | ||
+ | .bordered .top { | ||
+ | margin: 5px; | ||
+ | } | ||
</source> | </source> | ||
− | As shown, the | + | As shown, if the first character of the nested rule is '&', the CSS3 selector will be concatenated directly with a white space. |
+ | |||
+ | ==Nested Rules with @media== | ||
+ | |||
+ | [http://www.w3.org/TR/css3-mediaqueries/ The media queiries] (@media) can be nested with rules too. For example, | ||
<source lang="CSS"> | <source lang="CSS"> | ||
− | + | div { | |
− | + | @media print { | |
− | + | span { color: orange;} | |
− | + | } | |
+ | border: 1px solid blue; | ||
} | } | ||
− | |||
</source> | </source> | ||
− | + | Outputs: | |
+ | |||
+ | <source lang="CSS"> | ||
+ | @media print { | ||
+ | div span { | ||
+ | color: orange; | ||
+ | } | ||
+ | } | ||
+ | div { | ||
+ | border: 1px solid blue; | ||
+ | } | ||
+ | </source> | ||
=Mixins= | =Mixins= | ||
Line 86: | Line 132: | ||
</source> | </source> | ||
− | + | CSS equivalent: | |
<source lang="CSS"> | <source lang="CSS"> | ||
Line 97: | Line 143: | ||
</source> | </source> | ||
− | = | + | Here is an example: a mixin with nested rules: |
+ | <source lang="CSS"> | ||
+ | @border_radious(@radius: 4px, @color: orange) { | ||
+ | border-radius: @radius; | ||
+ | div.hilite { | ||
+ | color: @color; | ||
+ | } | ||
+ | } | ||
− | + | div.rounded { | |
+ | @border_radious(); | ||
+ | } | ||
+ | button.rounded { | ||
+ | @border_radious(3px, blue); | ||
+ | } | ||
+ | </source> | ||
− | + | Then, CSS equivalent: | |
<source lang="CSS"> | <source lang="CSS"> | ||
− | . | + | div.rounded { |
− | + | border-radius: 4px | |
− | + | } | |
− | } | + | div.rounded div.hilite { |
− | + | color: orange; | |
− | + | } | |
− | + | button.rounded { | |
+ | border-radius: 3px | ||
+ | } | ||
+ | button.rounded div.hilite { | ||
+ | color: blue; | ||
} | } | ||
</source> | </source> | ||
− | + | Here is a CSS 3 example: | |
<source lang="CSS"> | <source lang="CSS"> | ||
− | + | @coloring(@c1: navy, @c2: green, @c3: maroon, @c4) { | |
− | + | p:nth-child(4n+1) { color: navy; } | |
− | } | + | p:nth-child(4n+2) { color: green; } |
− | + | p:nth-child(4n+3) { color: maroon; } | |
− | + | p:nth-child(4n+4) { color: purple; } | |
} | } | ||
+ | @coloring(); | ||
</source> | </source> | ||
Line 172: | Line 236: | ||
<source lang="CSS"> | <source lang="CSS"> | ||
@nice_grey: #5B5B5B; | @nice_grey: #5B5B5B; | ||
+ | @darken(@color, @diff: 10%): @color * (1 - @diff); | ||
div { | div { | ||
Line 183: | Line 248: | ||
div { | div { | ||
color: #525252; | color: #525252; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | ==Expression in Style's Value== | ||
+ | Expressions are allowed in [[#Variable Definition|the definition of variables]], [[#Function Definition 1|the definition of functions]] and [[#Function Usage|the invocation of functions]]. However, to avoid the conflict with CSS's expression, expressions are not allowed in the value of a style. Rather, they are generated as CSS directly. For example, the CSS output will be exactly the same as ZUSS in the following example: | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | div { | ||
+ | width: calc(2*1.5px + 1 + 1em); | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | If you'd like to evaluate it, you could use a built-in function called <code>@eval</code> and use the expression as the argument, such as | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | div { | ||
+ | width: calc(@eval(2*1.5px + 1) + 1em); | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | The, it will generate the following CSS output: | ||
+ | |||
+ | <source lang="CSS"> | ||
+ | div { | ||
+ | width: calc(4px + 1em); | ||
} | } | ||
</source> | </source> | ||
=Include= | =Include= | ||
+ | |||
@include ''path'' ; | @include ''path'' ; | ||
Line 230: | Line 321: | ||
} | } | ||
</source> | </source> | ||
+ | |||
+ | =Version History= | ||
+ | {{LastUpdated}} | ||
+ | {| border='1px' | width="100%" | ||
+ | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | {{ZUSSReferencePageFooter}} |
Latest revision as of 13:28, 19 January 2022
This article is out of date, please refer to https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling for more up to date information.
Variables
Variable Definition
@name: value; @name: expression;
Example,
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
The name must be composed of letters, numbers, the underscore (_) and the dash (-).
Variable Usage
@name
Example,
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@dark-orange: orange - #010203; /*orange is a standard color.*/
div.hilite { color: @light-blue;}
div.hilite2 { color: @dark-orange;}
Outputs:
div.hilite { color: #6c94be;}
div.hilite2 { color: #fea300;}
Nested Rules
CSS3 selector { ZUSS content }
Example,
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
Outputs:
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
As shown, if the first character of the nested rule is '&', the CSS3 selector will be concatenated directly with a white space.
Nested Rules with @media
The media queiries (@media) can be nested with rules too. For example,
div {
@media print {
span { color: orange;}
}
border: 1px solid blue;
}
Outputs:
@media print {
div span {
color: orange;
}
}
div {
border: 1px solid blue;
}
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(expression 1, 'expression 2);
Example,
@border_radious(@radius: 4px) {
border-radius: @radius;
}
div.rounded {
@border_radious();
}
button.rounded {
@border_radious(3px);
}
CSS equivalent:
div.rounded {
border-radius: 4px;
}
button.rounded {
border-radius: 3px;
}
Here is an example: a mixin with nested rules:
@border_radious(@radius: 4px, @color: orange) {
border-radius: @radius;
div.hilite {
color: @color;
}
}
div.rounded {
@border_radious();
}
button.rounded {
@border_radious(3px, blue);
}
Then, CSS equivalent:
div.rounded {
border-radius: 4px
}
div.rounded div.hilite {
color: orange;
}
button.rounded {
border-radius: 3px
}
button.rounded div.hilite {
color: blue;
}
Here is a CSS 3 example:
@coloring(@c1: navy, @c2: green, @c3: maroon, @c4) {
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
}
@coloring();
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): @import class-name; @name (@argument-name: default-value, @argument-name: default-value): '@import class-name#method-name;
It defines a function imported from a Java method. Example,
@darken(@color, @diff): @import 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%): @import org.zkoss.zuss.Utils#darken;
Function Usage
@name(expression 1, expression 2)
Example,
@nice_grey: #5B5B5B;
@darken(@color, @diff: 10%): @color * (1 - @diff);
div {
color: @darken(@nice_grey);
}
Outputs:
div {
color: #525252;
}
Expression in Style's Value
Expressions are allowed in the definition of variables, the definition of functions and the invocation of functions. However, to avoid the conflict with CSS's expression, expressions are not allowed in the value of a style. Rather, they are generated as CSS directly. For example, the CSS output will be exactly the same as ZUSS in the following example:
div {
width: calc(2*1.5px + 1 + 1em);
}
If you'd like to evaluate it, you could use a built-in function called @eval
and use the expression as the argument, such as
div {
width: calc(@eval(2*1.5px + 1) + 1em);
}
The, it will generate the following CSS output:
div {
width: calc(4px + 1em);
}
Include
@include path ;
Example
@include another.zuss;
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)
}
}
Version History
Version | Date | Content |
---|---|---|