Сообщений в теме: 8

[immortal727]

Использую 12 колоночную верстку в grid. Для этого импортирую прикрепленный файл.

Но стоило мне настраивать media как возникли с этим сильные проблемы. Во первых min-width у body не верно подхватывался. Ладно, с этим разобрался путем примеси в template.less

.mWidtch(@desktop-area: 1170px){
    min-width: @desktop-area;
}

После в desktop.less пишем

body{ .mWidtch(970px;)}

Но если посмотреть файл grid, то там есть переменная @mWidth: @desktop-area;

и эта переменная применяется везде у колонок, у самого контейнера и т.д.
Она зависит от переменной @desktop-area.

Для этого я в templates.less задал ей значение перед импортом grid.less
Но также и в файле desktop.less задал ей нужное значение, но она вообще не прихватывается никак. Только работает значение из файла templates.less. Как решить данную проблему?

Прикрепленные файлы

•  grid.zip   633байт   300 Количество загрузок:

[Cheren-dow]

immortal727, попробуйте только в grid.less задать значение для @desktop-area

[immortal727]

Уже пробовал в grid.less прописать, бесполезно. 

[Cheren-dow]

immortal727, что за ошибка какие стили на выходе формируются? Почему бы сразу для @mWidth не задавать нужно значение?

[immortal727]

Переменную тоже пробовал задавать нужное значение в desktop.less, тоже никакого результата.
Ошибок никаких нет, стили формируются при смене расширения верно, но вот колонки, контейнер расчет ведут как раз только от начального значения @desktop-area: 1170px; ,указанного хоть в tempates.less, хоть в grid.less
Можете сами посмотреть http://salon-bikini.com.ua(расширение от 1025 укажите)

Сообщение отредактировал immortal727: 30 June 2015 - 11:36

[immortal727]

Никто не верстал через grid больше и не сталкивался с такой проблемой?

Пробовал в grid.less указать меди напрямую уже

@desktop-area: 1170px;
@media only screen and (min-width: 1025px) and (max-width: 1280px){
    @desktop-area: 970px;
}

Бесполезно.

Сообщение отредактировал immortal727: 01 July 2015 - 14:50

[immortal727]

Странно, если взять и скопировать код из grid.less в desktop.less, то работает.

А если сделать как @import "layouts/grid.less"; или @import "../layouts/grid.less"; в файле desktop.less, то нет. Обязательно приходится весь код копировать. Как сделать правильно, подскажите пожалуйста

Сообщение отредактировал immortal727: 01 July 2015 - 15:12

[immortal727]

Значит, так никто получается и не сталкивался с этим grid.less  через media запросы?!
Выход получается только один на мой взгляд, пускай хоть и убогий (пока не найдется решения) - в файле templates.less комментируем внизу строчки с media, а сами файлы, типа desktop.less, подключаем в init.php. Только уже конкретно в desktop.less пишу нужный мне медиа запрос. И там заново импортируем этот grid.less, будь он неладен
Очень разочаровался в этом less, с одной стороны вроде удобней, а посмотрев на код, то много лишнего получается, типа grid-x

Если брать bootstrap, то через чур навороченный, весит много, да и то же самое в коде получается подобие, что и у grid

Сообщение отредактировал immortal727: 02 July 2015 - 12:33

[SmetDenis]

А если сделать как @import "layouts/grid.less"; или @import "../layouts/grid.less"; в файле desktop.less, то нет. Обязательно приходится весь код копировать. Как сделать правильно, подскажите пожалуйста

Что бы не копировать импорт и не ломать пространство имен, нужно делать примеси. Работают при принципу функций. Ничего сложного.

Мне кажется ваша проблема не в less, а в том что вы не правильно используете грид.
Он должен подключаться один раз, обрамленный одним родительским классом.
Через media "подправляться" для нужных разрешений, например убирать колонки.

Но если вы настаиваете на своем варианте работы сетки, то единственное верно решение - примесь
 

Очень разочаровался в этом less, с одной стороны вроде удобней, а посмотрев на код, то много лишнего получается, типа grid-x

Кровавое месиво в программировании можно устроить на любом языке и любой технологии