Какую сетку лучше всего использовать с LESS CSS?

Я хотел бы использовать каркас сетки (например, blueprint/960.gs/...) с LESS(.js), но, похоже, есть некоторые проблемы, когда вы решите пойти по этому пути:

Например, с blueprint: таблица стилей ie hacks запрещает использовать классы container/span-X в качестве mixins, поскольку смешанные классы не будут отображаться в элементах html. например поставить

#content { .container; }

в вашей таблице стилей.less хаки не будут применены (и это имеет смысл).

Так что мне было интересно, кто-нибудь уже "портировал" план или 960gs на менее css? Я смотрю на Google, но не нашел ничего (я попробовал сам, но учитывая используемые селекторы IE hacks/css, преобразование нетривиально).

PS: Другой вопрос похож на SO, но автор решил запустить фреймворк самостоятельно, я бы предпочел использовать "популярный" фреймворк

edit: пример проблемы при применении классов из меньшего файла (mixins): в 960.gs у вас есть правило:

.container_12 .grid_3{
    width:220px;
}

HTML (упрощенно):

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

С LESS было бы неплохо определить макет в таблице стилей следующим образом:

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

но это не будет работать (правило не будет применяться к col1 и col2), так как LESS не имеет ни малейшего понятия о том, что # col1 находится в #main (селектор #main # col1 не справится с задачей, это довольно сложно с точки зрения LESS Посмотреть)

Источник

4 ответа

Решение

Редактировать 13/07/2012: Twitter Bootstrap - мой новый любимый выбор.

Редактировать: еще один, который выглядит очень красиво: http://semantic.gs/

Я еще не проверял это, но http://centage.peruste.net/ - это фреймворк LESS.js css.

Источник

Вы не можете вкладывать #col1 и #col2 в #main?

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

Должен дать вывод #main #col1 {rendered CSS code}

Источник

Мне нравится использовать Less Framework с {less}. Просто потому что это смущает людей до крайности...

Источник

Я использую Blueprint с LESS, и он прекрасно работает. Единственное, что вам нужно сделать, это. в своем HTML убедитесь, что база div имеет class="container", если вы это сделаете, все остальное будет работать без сбоев.

переименуйте ваш screen.css в screen.less

@import "screen.less";
#header {     
    .span-24; .last; // Now, Have Fun! :D
         }
Источник
Другие вопросы по тегам