Hitch constants

Hitch Constants

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

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

Have you gotten sick of having to remember, re-type and read long selectors?

Instead of:

nav div.toolbox .titlebar span:nth-child(2) .icon:nth-child(1){...}
nav div.toolbox .titlebar span:nth-child(2) .icon:nth-child(2){...}
nav div.toolbox .titlebar span:nth-child(2) .icon:nth-child(3){...}

You can define:

@-hitch-const -my-toolbox nav div.toolbox .titlebar span:nth-child(2) .icon;

and then your rules becomes:

-my-toolbox:nth-child(1){...}
-my-toolbox:nth-child(2){...}
-my-toolbox:nth-child(3){...}

If you do this well, it is considerably easier to read. A bigger benefit though is if you change the structure, it is trivial to do so in one place. The top section of your Stylesheet becomes a nice form of documentation for your most complex structures.

The values of Hitch Constants are not strictly related to selectors. They are actually just text-replacements and will work anywhere.

@-hitch-const -my-color1 #f134f4;
@-hitch-const -my-color2 #gf7892;


h1{
	background-color:   -my-color1;
	color:              -my-color2;
}