Конструктивный миксин «Грид-контейнер»

Миксин «Грид-контейнер» позволяет с легкостью строить конструкции, предусматривающие так называемый «выход за ограничивающий контейнер».

HTML-конструкция:

Обратите внимание! Обычного ограничивающего контейнера не должно быть.

<section class="some-section">
	<div class="some-section__some-content">
		<!-- Some content -->
	</div>
</section>

Работа в SCSS:

Снипет gc

.some-section {
	@include gridContainer(N);
}

Где N тип вывода контента (см. далее)

В результате работы миксина построится следующий грид-контейнер:

1. Отступление начальное, на основе данных в переменной $containerPadding
2. Пустая колонка
3. Основной контент в ширину на основе данных в переменной $maxWidthContainer , сюда будут повышен HTML-элемент . some-section__some-content
4. Пустая колонка
5. Отступ окончательный, на основе данных в переменной $containerPadding

Параметры миксина

Параметр N может иметь значение:

• 0 – (по умолчанию) контент будет размещен в центре сетки (обычное поведение ограничивающего контейнера)
• 1 – контент будет размещен на всю ширину вьюпорта
• 2 – контент будет размещен на всю ширину вьюпорта за исключением горизонтальных отступов.
• 3 – контент будет размещен так что правая сторона будет вплотную к краю браузера
• 4 – контент будет размещен так что левая сторона будет вплотную к краю браузера
• 5 – контент будет размещен так что левая сторона будет вплотную к краю браузера за исключением начального отступа
• 6 – контент будет размещен так что правая сторона будет вплотную к краю браузера за исключением окончательного отступа