Skip to content
Clint Hill edited this page Jan 2, 2012 · 4 revisions

h1. Hitch Constants

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

@-hitch-const  CONSTANTNAME   WHATITREPRESENTS

Did you ever get sick of having to remember, retype and read long selectors?

With constants you can define and reuse them... 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-toolboxTbButtons    nav div.toolbox .titlebar span:nth-child(2) .icon;

and then your sheet becomes:

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

it's marginally smaller, to use, but there are considerable advantages in the fact that you need not write/remember/repeat the formulas. If you do this well, it will be considerably easier to read. Because of all of this, you wil find that you require less 'hooks' in your html. A considerably bigger benefit though is that if you change the structure, it is trivial to do so in one place. The top section of your sheet also becomes a nice form of documentation for your most complex structures as well.

But, the values/possible uses of consts are not strictly related to selectors -- they are actually just text-replacements, they will work out for you anywhere... Design a pallette...

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


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

In fact, if you are very adventureous you could define blocks (though you will have to escape semi-colons)...

@-hitch-const  -my-panelprops  margin: 10px\; border: 1px solid green\; padding: 1em\;;  


.xPanel{
	-my-panelprops
	background-color: red;
}


.yPanel{
	-my-panelprops
	background-color: blue;
}

However, if you find yourself defining a lot of blocks like this, you should probably look into a more advanced pre-processing tool like SAAS or Less for those purposes.

Clone this wiki locally