Перейти к содержимому


Фотография
- - - - -

Конфликт grid.less в media


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

#1 immortal727

immortal727

Отправлено 30 June 2015 - 11:13

Использую 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байт   150 Количество загрузок:

  • 0

#2 Cheren-dow

Cheren-dow

Отправлено 30 June 2015 - 11:20

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


  • 0
Изображение
 

#3 immortal727

immortal727

Отправлено 30 June 2015 - 11:26

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


  • 0

#4 Cheren-dow

Cheren-dow

Отправлено 30 June 2015 - 11:31

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


  • 0
Изображение
 

#5 immortal727

immortal727

Отправлено 30 June 2015 - 11:35

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


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

  • 0

#6 immortal727

immortal727

Отправлено 01 July 2015 - 08:23

Никто не верстал через 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

  • 0

#7 immortal727

immortal727

Отправлено 01 July 2015 - 15:11

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

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


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

  • 0

#8 immortal727

immortal727

Отправлено 02 July 2015 - 12:31

Значит, так никто получается и не сталкивался с этим 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

  • 0

#9 SmetDenis

SmetDenis

Отправлено 05 July 2015 - 20:50

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

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

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

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

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

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


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.





Click to return to top of page in style!