Hitch constants

Hitch Constants

A simple mechanism for you to define your own constants for use in CSS.

Syntax

@-hitch-const <constant> <what-it-represents>

Description

Hitch Constants are simple text replacements and provide a way to maintain a single instance that is referenced in many places within a stylesheet.

Typical cases would be to maintain a color in one place and reference it by name in many other places. Likewise you can maintain a long selector in one place and reference it by name in many other places.

Example constant for colors

<style x-hitch-interpret="true">
    /* Set the constant -log-blue equal to #336699 in all instances
       where it's used in the stylesheet. */
    @-hitch-const -logo-blue #336699;
    @-hitch-const -logo-gray #333333;
	
    div.logo {
        background-color:   -logo-blue;
        color:              -logo-gray;
    }
</style>

Example constant for a long selector

<style x-hitch-interpret="true">
    /* Set the constant -toolbar equal to a long selector that is 
       referenced many other times in the stylesheet. */
    @-hitch-const -toolbar div.tools > .toolbars .main .toolbar

    -toolbar {
        font: 1em/0.8em Arial sans-serif; 
    }

    div.header -toolbar {
        font-size: 0.75em;
    }

    div.footer -toolbar {
        font-size: 0.95em;
    }
</style>