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

### 17.2. @property-value

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

Prev | Up | Next
17.1. @property-group | Home | 18. marker-offset: fill