@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;
}