@property-value allows to defined a named, possibly parametrized, property value. The syntax for defining such named property value is:

@property-value name( param1, ..., paramN ) value ... value;

Including a @property-value in a property is possible by using the usual pseudo-function syntax:

propertyName: value ... name( argument1, ..., argumentN ) ... value;

Simple example:

@property-value generated-icon-color() gray;

indexterm:after {
    content: icon(right-half-disc);
    color: generated-icon-color();
}

anchor {
    content: icon(right-target);
    color: generated-icon-color();
}

The above example is equivalent to:

indexterm:after {
    content: icon(right-half-disc);
    color: gray;
}

anchor {
    content: icon(right-target);
    color: gray;
}

A @property-value can have formal parameters. When a @property-value is included in a property, these formal parameters are replaced by actual arguments. Example:

@property-value attributes-editor(margin, bg) 
    attributes(margin-top, margin,
               margin-bottom, margin,
               margin-left, margin,
               margin-right, margin,
               background-color, bg);

@namespace foo "http://foo.com/ns";

foo|target {
    content: attributes-editor(2, #C0E0E0);
}

The above example is equivalent to:

foo|target {
    content: attributes(margin-top, 2,
                        margin-bottom, 2,
                        margin-left, 2,
                        margin-right, 2,
                        background-color, #C0E0E0);
}

Using the argument-list() pseudo-function, it is possible to replace a single formal parameter by a sequence of several actual arguments. Example:

foo|target {
    content: attributes-editor(2, argument-list(#C0E0E0, color, navy));
}

The above example is equivalent to:

foo|target {
    content: attributes(margin-top, 2,
                        margin-bottom, 2,
                        margin-left, 2,
                        margin-right, 2,
                        background-color, #C0E0E0,
                        color, navy);
}

The argument-list() pseudo-function may have no arguments at all, which is sometimes useful to suppress a formal parameter. Example:

@property-value attributes-editor(margin, args) 
    attributes(margin-top, margin,
               margin-bottom, margin,
               margin-left, margin,
               margin-right, margin,
               args);

@namespace bar "http://bar.com/ns";

bar|target {
    content: attributes-editor(2, argument-list());
}

The above example is equivalent to:

bar|target {
    content: attributes(margin-top, 2,
                        margin-bottom, 2,
                        margin-left, 2,
                        margin-right, 2);
}

A @property-value can include other @property-values. Example:

@property-value header(title, bg) 
    division(content(paragraph(content(collapser(collapsed-icon, 
                                                 icon(pop-right), 
                                                 expanded-icon,
                                                 icon(pop-down)), " ",
                                       title, 
                                       replace-button(), " ",
                                       insert-before-button(), " ",
                                       insert-button(), " ",
                                       insert-after-button(), " ",
                                       convert-button(), " ",
                                       delete-button(), "  ",
                                       add-attribute-button(
                                           check-has-attributes, yes,
                                           color, navy)),
                                background-color, bg,
                                padding-left, 4),
                     attributes-editor(2, bg)));

@namespace xs "http://www.w3.org/2001/XMLSchema";

xs|schema > xs|complexType:before,
xs|schema > xs|simpleType:before {
  content: header(argument-list(element-name(), "  "), 
                  #C0E0E0);
}

The above example is equivalent to:

xs|schema > xs|complexType:before,
xs|schema > xs|simpleType:before {
  content: division(content(paragraph(content(collapser(collapsed-icon, 
                                                       icon(pop-right), 
                                                       expanded-icon,
                                                       icon(pop-down)), " ",
                                              element-name(), "  ", 
                                              replace-button(), " ",
                                              insert-before-button(), " ",
                                              insert-button(), " ",
                                              insert-after-button(), " ",
                                              convert-button(), " ",
                                              delete-button(), "  ",
                                              add-attribute-button(
                                                  check-has-attributes, yes,
                                                  color, navy)),
                                       background-color, #C0E0E0,
                                       padding-left, 4),
                            attributes-editor(2, #C0E0E0)));
}

A @property-value can even include a reference to itself. This simply means that the new definition specializes the old one. Example:

@property-value header(bg) 
    header(argument-list(element-name(), " ", 
                         label(attribute, name, font-weight, bold), "  "),
           bg);

xs|schema > xs|element:before {
  content: header(#E0C0C0);
}

The above example is equivalent to:

xs|schema > xs|element:before {
  content: division(content(paragraph(content(collapser(collapsed-icon, 
                                                       icon(pop-right), 
                                                       expanded-icon,
                                                       icon(pop-down)), " ",
                                              element-name(), " ",
                                              label(attribute, name, 
                                                    font-weight, bold), "  " 
                                              replace-button(), " ",
                                              insert-before-button(), " ",
                                              insert-button(), " ",
                                              insert-after-button(), " ",
                                              convert-button(), " ",
                                              delete-button(), "  ",
                                              add-attribute-button(
                                                  check-has-attributes, yes,
                                                  color, navy)),
                                       background-color, #E0C0C0,
                                       padding-left, 4),
                            attributes-editor(2, #E0C0C0)));
}