Сетки на препроцессоре 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

Вывод: Теперь вся работа над версткой макета сводится к выводу соответствующих миксинов. Вам не придётся помногу раз набирать различные медиа запросы, а любые изменения в сетку возможны изменением соответствующей переменной.

Зарегистрируйтесь для получения материалов к урокам!