-
Notifications
You must be signed in to change notification settings - Fork 14
Hitch constants
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.