Getting Started"

From Documentation
m (correct highlight (via JWB))
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZUSSReferencePageHeader}}
 
{{ZUSSReferencePageHeader}}
 +
 +
{{Deprecated|url=https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling}}
  
 
=Overview=
 
=Overview=
Line 6: Line 8:
 
'''Variables'''
 
'''Variables'''
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
−
|-
+
|- valign="top"
 
| width="50%" |
 
| width="50%" |
−
|- valign="top"
 
−
|
 
 
<source lang="CSS">
 
<source lang="CSS">
 
/* ZUSS */
 
/* ZUSS */
Line 29: Line 29:
 
'''Mixins'''
 
'''Mixins'''
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
−
|-
+
|- valign="top"
 
| width="50%" |
 
| width="50%" |
−
|- valign="top"
 
−
|
 
 
<source lang="CSS">
 
<source lang="CSS">
 
/* ZUSS */
 
/* ZUSS */
Line 60: Line 58:
 
'''Nested Rules'''
 
'''Nested Rules'''
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
−
|-
+
|- valign="top"
 
| width="50%" |
 
| width="50%" |
−
|- valign="top"
 
−
|
 
 
<source lang="CSS">
 
<source lang="CSS">
 
/* ZUSS */
 
/* ZUSS */
Line 84: Line 80:
 
   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>
 
|}
 
|}
  
 
=Download=
 
=Download=
 +
 +
* Download the binary distribution from [http://code.google.com/p/zuss/downloads/list here]
 +
* Get <code>zuss.jar</code> under the <code>dist/lib</code> directory of the binary distribution<ref>If you'd like to debug with the source code of ZUSS with IDE, you could get <code>zuss-sources.jar</code> under the <code>dist/src</code> directory.</ref>
 +
 +
<blockquote>
 +
----
 +
<references/>
 +
</blockquote>
  
 
=Servlet Usage=
 
=Servlet Usage=
 +
 +
* Copy <code>zuss.jar</code> to the <code>WEB-INF/lib</code> directory
 +
* Add the following content to <code>WEB-INF/web.xml</code>
 +
 +
<source lang="xml">
 +
<servlet>
 +
<servlet-name>ZUSS</servlet-name>
 +
<servlet-class>org.zkoss.zuss.ZussServlet</servlet-class>
 +
</servlet>
 +
<servlet-mapping>
 +
<servlet-name>ZUSS</servlet-name>
 +
<url-pattern>*.zuss</url-pattern>
 +
</servlet-mapping>
 +
</source>
 +
 +
For the configuration of the ZUSS servlet, please refer to the <javadoc directory="zuss">org.zkoss.zuss.ZussServlet</javadoc> (JavaDoc could be downloaded from [http://code.google.com/p/zuss/downloads/list here]).
  
 
=Command-line Usage=
 
=Command-line Usage=
 +
 +
You could invoke the ZUSS compiler from the command-line.
 +
 +
<source lang="bash">
 +
java -jar zuss.jar foo.zuss
 +
</source>
 +
 +
For a synopsis of standard options:
 +
 +
<source lang="bash">
 +
java -jar zuss.jar foo.zuss -h
 +
</source>
  
 
=Java Usage=
 
=Java Usage=
 +
 +
The utilities to compile ZUSS can be found in <javadoc directory="zuss">org.zkoss.zuss.Zuss</javadoc>. The <code>parse</code> methods are used to parse a variable input source into an immediate format. The <code>translate</code> methods are  used to translate the immediate format to CSS.
 +
 +
If your ZUSS file is dynamical, you could store the immediate format and then translate to CSS with an optional variables and function resolver (called <javadoc directory="zuss">org.zkoss.zuss.Resolver</javadoc>).
 +
 +
= Bug Reports and Feature Requests=
 +
 +
Please post and follow the issues at [https://github.com/tomyeh/ZUSS/issues GitHub].
 +
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}

Latest revision as of 13:28, 19 January 2022

DocumentationZUSS ReferenceGetting Started
Getting Started



Stop.png 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.

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

  • Download the binary distribution from here
  • Get zuss.jar under the dist/lib directory of the binary distribution[1]
  1. ↑ If you'd like to debug with the source code of ZUSS with IDE, you could get zuss-sources.jar under the dist/src directory.

Servlet Usage

  • Copy zuss.jar to the WEB-INF/lib directory
  • Add the following content to WEB-INF/web.xml
	<servlet>
		<servlet-name>ZUSS</servlet-name>
		<servlet-class>org.zkoss.zuss.ZussServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ZUSS</servlet-name>
		<url-pattern>*.zuss</url-pattern>
	</servlet-mapping>

For the configuration of the ZUSS servlet, please refer to the ZussServlet (JavaDoc could be downloaded from here).

Command-line Usage

You could invoke the ZUSS compiler from the command-line. 

java -jar zuss.jar foo.zuss

For a synopsis of standard options: 

java -jar zuss.jar foo.zuss -h

Java Usage

The utilities to compile ZUSS can be found in Zuss. The parse methods are used to parse a variable input source into an immediate format. The translate methods are used to translate the immediate format to CSS.

If your ZUSS file is dynamical, you could store the immediate format and then translate to CSS with an optional variables and function resolver (called Resolver).

Bug Reports and Feature Requests

Please post and follow the issues at GitHub.

Version History

Last Update : 2022/01/19


Version Date Content
     



Last Update : 2022/01/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZUSS_Reference/Getting_Started&oldid=53730"