18.1. @property-group

@property-group allows to define a named, possibly parametrized, group of properties. The syntax for defining such group is:

@property-group groupName( 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;
}