@property-group allows to define a named, possibly parametrized, group of properties. The syntax for defining such group is:
@property-groupgroupName
(param1
, ...,paramN
) {property
; . . .property
; }
Including a @property-group in a rule is possible by using the following syntax:
selector {property
; . . . property-group:groupName
(argument1
, ...,argumentN
); . . .property
; }
Simple example:
@property-group title-style() { color: #004080; font-weight: bold; } @property-group standard-vmargins() { margin: 1.33ex 0; } title, subtitle, titleabbrev { display: block; property-group: title-style(); property-group: standard-vmargins(); }
The above example is equivalent to:
title, subtitle, titleabbrev { display: block; color: #004080; font-weight: bold; margin: 1.33ex 0; }
A @property-group can include other @property-groups. Example:
@property-group verbatim-style() { font-family: monospace; font-size: 0.83em; } @property-group verbatim-block-style() { display: block; white-space: pre; property-group: verbatim-style(); property-group: standard-vmargins(); border: thin solid gray; padding: 2px; } programlisting { property-group: verbatim-block-style(); }
The above example is equivalent to:
programlisting { display: block; white-space: pre; font-family: monospace; font-size: 0.83em; margin: 1.33ex 0; border: thin solid gray; padding: 2px; }
@property-groups can have formal parameters. When a @property-group is included in a rule, these formal parameters are replaced by actual arguments. Example:
@property-group verbatim-block-style(border-color) { display: block; white-space: pre; property-group: verbatim-style(); property-group: standard-vmargins(); border: thin solid border-color; padding: 2px; } programlisting { property-group: verbatim-block-style(#E0E0E0); }
The above example is equivalent to:
programlisting { display: block; white-space: pre; font-family: monospace; font-size: 0.83em; margin: 1.33ex 0; border: thin solid #E0E0E0; padding: 2px; }
A @property-group can even include a reference to itself. This simply means that the new definition extends (or partly overrides) the old one. Example:
@property-group verbatim-block-style(border-color, background-color) { property-group: verbatim-block-style(border-color); background-color: background-color; } programlisting { property-group: verbatim-block-style(rgb(127,127,127), #EEEEEE); }
The above example is equivalent to:
programlisting { display: block; white-space: pre; font-family: monospace; font-size: 0.83em; margin: 1.33ex 0; border: thin solid rgb(127,127,127); padding: 2px; background-color: #EEEEEE; }