What’s the best grid framework to use with LESS css? [closed]

Question

I'd like to use a grid framework (e.g. blueprint/960.gs/...) with LESS(.js) but it looks there's some issues when you decide to go that way:

For example with blueprint: The ie hacks stylesheet prevents to use the container/span-X classes as mixins given that the mixed-in classes will not appear in the html elements. for example put

#content { .container; } 

in your .less stylesheet, the ie hacks will not get applied (and it make sense).

So I was wondering if anyone already "ported" blueprint or 960gs to less css? I look on google but haven't found anyting (I tried myself but given the IE hacks/css selectors used, the conversion is non-trivial).

PS: Another question is similar on SO but the author decided to start a framework on his own, i'd prefer to use a "popular" framework

edit: example of a problem when applying classes from less file (mixins): in 960.gs you have the rule:

.container_12 .grid_3{
    width:220px;
}

the html (simplified):

<div id="main">
  <div id="col1">
  </div>
  <div id="col2">
  </div>
</div>

With LESS, it would be nice to define the layout in the style sheet like that:

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

but it will not work (the rule will not apply to col1 and col2) since LESS have no clue about #col1 being in #main (the selector #main #col1 wouln't do the trick, it's pretty complex from the LESS point of view)

Answer 1

Edit 13/07/2012: Twitter Bootstrap is my new favorite choice.

Edit: another one that looks very nice: http://semantic.gs/

I havn't tested it yet, but http://centage.peruste.net/ is a LESS.js css framework.

Answer 2

You can't nest #col1 and #col2 in #main?

#main {
   #col1 {.alpha; .grid_3;}
   #col2 {.omega; .grid_3;}
}

Should give the output #main #col1 {rendered CSS code}

Answer 3

I am using Blueprint with LESS and it works beautifully. Only one thing that you need to do is. in your HTML make sure the base div has class="container". if you do just this the rest will work without any glitches.

rename your screen.css to screen.less

@import "screen.less";
#header {     
    .span-24; .last; // Now, Have Fun! :D
         }

Answer 4

I like using the Less Framework with {less}. Just cause it confuses people to the extreme...