cloudhead/less.js — Issue #664: Priority controller
Author: david-proweb
Created: 2012-02-26 09:55:13+00:00
State: open

Hi!

Currenctly there are only one priority controller, that is the default of CSS, the `!important`. The idea is implement a better priority controller using `!1`, `!2`, ... `!N`. Biggest number, biggest priority.

**Optional**: maybe `!important-n`?

Example:

h1 {
color: blue !2;
}

h1, h2, h3 {
font-size: 12pt;
color: red !1;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
color: green;
}

Result need be:

h1, h2, h3, h4, h5, h6 {
margin: 0;
color: green;
}

h1, h2, h3 {
font-size: 12pt;
color: red;
}

h1 {
color: blue;
}

In more complex cases need more attention, because sometimes need repeat the rule to apply a priority property. Maybe it is useful for Bootstrap, one time that it's very complex.

h1 {
font-size: 14pt !1;
color: blue !2;
}

h1, h2 {
font-size: 12pt !2;
color: red;
}

Note that the property `h1:color` and the `h1, h2:font-size` have priority 2, so, it need stay on bottom of CSS to prioritize that. So te result is:

h1 { font-size: 14pt; }
h1, h2 { font-size: 12pt; color: red; }
h1 { color: blue; }

For very easy rules, we can optimize it:

h1 { font-size: 14pt; color: blue; }
h2 { font-size: 12pt; color: red; }

The difference between `!important` is that it only have a new limited layer of priority and it is useful to override the base style with the project style ([more here](http://hungred.com/useful-information/css-priority-order-tips-tricks/)).

Bye. :)