Сетки на препроцессоре less
Сейчас я покажу какие возможности нам открывают препроцесоры, а именно мы рассмотрим сетки на препроцессоре less.
Если вы используете в своей работе препроцессоры, то необходимости использования bootstrap и ему подобных css фреймворков сводится к нулю, так как всё это можно реализовать без особого труда причём код будет куда чище.
Давайте начнём со структуры нашего будущего проекта
Создаём несколько less файлов:
1. params.less — хранит в себе переменные
2. reset или normalize — сброс или нормирование стилей
3. style.less — основной файл стилей (можно разбивать на несколько)
4. mixin.less — содержит в себе миксины для создания сеток и миксины с медиа запросами
Неплохим дополнением для данного проекта будет использование методологии БЭМ и разбиение style.less на более мелкие файлы (menu.less, aside.less и т.д.)
Пример миксина для разрешения md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @break_md: 780px; // с одним правилом .md(@name, @value){ @media screen and (max-width: @break_md){ @{name}: @value; } } // с несколькими правилами .md-block(@content){ @media screen and (max-width: @break_md){ @content(); } } // вызов миксина .md(padding-top, 100%); .md-block({ width: 70%; background: #00ff00; }); |
Создание сетки на препроцессоре less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | @break_md: 780px; @columns: 12; // количество колонок @offset: 15px; // отступы между ячейками @offset-all: 30px; // суммарные отступы // миксин для формирования отступов между колонками сетки .col(){ margin-left: @offset; margin-right: @offset; box-sizing: border-box; } // количество ячеек в сетке .size(@n){ @atom: 100% / @columns * @n; width: ~"calc(@{atom} - 30px)"; } // количество ячеек в сетке для устройств md .size-md(@n){ @media screen and (max-width: @break_md){ @atom: 100% / @columns * @n; width: ~"calc(@{atom} - @{offset-all})"; } } // вызов миксинов .block{ .col(); .size(4); .size-md(6); .size-xs(10); } |
Примерные брейкпоинты
xl > 1200 px
lg > 992px
md > 720px
sm > 576px
xs < 576px
Вывод: Теперь вся работа над версткой макета сводится к выводу соответствующих миксинов. Вам не придётся помногу раз набирать различные медиа запросы, а любые изменения в сетку возможны изменением соответствующей переменной.
Зарегистрируйтесь для получения материалов к урокам!
24 октября 2018 /
3035 Views /
6 комментариев