17.1. @property-group
Prev | 17. Modularizing a complex CSS style sheet using @property-group and @property-value | Next

### 17.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;
    }

Prev | Up | Next
17. Modularizing a complex CSS style sheet using @property-group and @property-value | Home | 17.2. @property-value