Permalink
0bd7eac Mar 22, 2017
1 contributor

Users who have contributed to this file

335 lines (262 sloc) 10 KB
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
$container-sm: 100% !default;
$container-md: 100% !default;
$container-lg: ($screen-lg - 30) !default;
$container-xl: ($screen-xl - 30) !default;
$container-xxl: ($screen-xxl - 30) !default;
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
//------------------------------------------------------------------------------
// Генератор правил для контейнера
//------------------------------------------------------------------------------
@mixin container (
$xs-grid-gutter: $grid-gutter-width,
$sm-grid-gutter: $grid-gutter-width,
$md-grid-gutter: $grid-gutter-width,
$lg-grid-gutter: $grid-gutter-width,
$xl-grid-gutter: $grid-gutter-width,
$xxl-grid-gutter: $grid-gutter-width
) {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
@if ($xs-grid-gutter != 0) {
padding-left: ($xs-grid-gutter / 2);
padding-right: ($xs-grid-gutter / 2);
}
@media (min-width: $screen-sm) {
width: $container-sm;
@if ($sm-grid-gutter != $xs-grid-gutter) {
padding-left: ($sm-grid-gutter / 2);
padding-right: ($sm-grid-gutter / 2);
}
}
@media (min-width: $screen-md) {
width: $container-md;
@if ($md-grid-gutter != $sm-grid-gutter) {
padding-left: ($md-grid-gutter / 2);
padding-right: ($md-grid-gutter / 2);
}
}
@media (min-width: $screen-lg) {
width: $container-lg;
@if ($lg-grid-gutter != $md-grid-gutter) {
padding-left: ($lg-grid-gutter / 2);
padding-right: ($lg-grid-gutter / 2);
}
}
@media (min-width: $screen-xl) {
width: $container-xl;
@if ($xl-grid-gutter != $lg-grid-gutter) {
padding-left: ($xl-grid-gutter / 2);
padding-right: ($xl-grid-gutter / 2);
}
}
@media (min-width: $screen-xxl) {
width: $container-xxl;
@if ($xxl-grid-gutter != $xl-grid-gutter) {
padding-left: ($xxl-grid-gutter / 2);
padding-right: ($xxl-grid-gutter / 2);
}
}
}
//------------------------------------------------------------------------------
// Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $xs-grid-gutter: $grid-gutter-width промежуток между ячейками XS-сетки
// $sm-grid-gutter: $grid-gutter-width промежуток между ячейками SM-сетки
// $md-grid-gutter: $grid-gutter-width промежуток между ячейками MD-сетки
// $lg-grid-gutter: $grid-gutter-width промежуток между ячейками LG-сетки
// $xl-grid-gutter: $grid-gutter-width промежуток между ячейками XL-сетки
// $xxl-grid-gutter: $grid-gutter-width промежуток между ячейками XXL-сетки
//------------------------------------------------------------------------------
// Пример вызова:
// .some-class {
// @include row (
// $xs-grid-gutter: $grid-gutter-width, // отступ по умолчанию
// $sm-grid-gutter: 0, // нет отступа
// $md-grid-gutter: $grid-gutter-width // отступ по умолчанию
// );
// }
//
// Идентичный вызов:
// .some-class {
// @include row ( $grid-gutter-width, 0, $grid-gutter-width );
// }
//------------------------------------------------------------------------------
@mixin row (
$xs-grid-gutter: $grid-gutter-width,
$sm-grid-gutter: $grid-gutter-width,
$md-grid-gutter: $grid-gutter-width,
$lg-grid-gutter: $grid-gutter-width,
$xl-grid-gutter: $grid-gutter-width,
$xxl-grid-gutter: $grid-gutter-width
) {
display: flex;
flex-wrap: wrap;
& > * {
flex-basis: 100%;
}
@if ($xs-grid-gutter != 0) {
margin-left: ($xs-grid-gutter / -2);
margin-right: ($xs-grid-gutter / -2);
}
@if ($sm-grid-gutter != $xs-grid-gutter) {
@media (min-width: $screen-sm) {
margin-left: ($sm-grid-gutter / -2);
margin-right: ($sm-grid-gutter / -2);
}
}
@if ($md-grid-gutter != $sm-grid-gutter) {
@media (min-width: $screen-md) {
margin-left: ($md-grid-gutter / -2);
margin-right: ($md-grid-gutter / -2);
}
}
@if ($lg-grid-gutter != $md-grid-gutter) {
@media (min-width: $screen-lg) {
margin-left: ($lg-grid-gutter / -2);
margin-right: ($lg-grid-gutter / -2);
}
}
@if ($xl-grid-gutter != $lg-grid-gutter) {
@media (min-width: $screen-xl) {
margin-left: ($xl-grid-gutter / -2);
margin-right: ($xl-grid-gutter / -2);
}
}
@if ($xxl-grid-gutter != $xl-grid-gutter) {
@media (min-width: $screen-xxl) {
margin-left: ($xxl-grid-gutter / -2);
margin-right: ($xxl-grid-gutter / -2);
}
}
}
//------------------------------------------------------------------------------
// Генератор ширины ячейки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок в этой ячейке)
// $columns: $grid-columns; количество ячеек в ряду
//
// Возвращает width.
//------------------------------------------------------------------------------
@mixin get-width ($column: 1, $columns: $grid-columns) {
$width: (100% / $columns) * $column;
flex: 0 0 $width;
max-width: $width;
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество ячеек на 1 ряд
// $gutter: $grid-gutter-width промежуток между ячейками
//------------------------------------------------------------------------------
@mixin make-col (
$column: 1,
$columns: $grid-columns,
$gutter: $grid-gutter-width
) {
@include get-width($column, $columns);
// ВНИМАНИЕ!
// если $gutter == false, в CSS не попадут правила padding-left и padding-right
@if ($gutter != false) {
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: $grid-columns ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество ячеек на 1 ряд
// $gutter: $grid-gutter-width промежуток между ячейками
//------------------------------------------------------------------------------
@mixin col (
$screen: xs,
$column: $grid-columns,
$columns: $grid-columns,
$gutter: $grid-gutter-width
) {
@if ($screen == xs) {
@include make-col($column, $columns, $gutter);
}
@if ($screen == sm) {
@media (min-width: $screen-sm) {
@include make-col($column, $columns, $gutter);
}
}
@if ($screen == md) {
@media (min-width: $screen-md) {
@include make-col($column, $columns, $gutter);
}
}
@if ($screen == lg) {
@media (min-width: $screen-lg) {
@include make-col($column, $columns, $gutter);
}
}
@if ($screen == xl) {
@media (min-width: $screen-xl) {
@include make-col($column, $columns, $gutter);
}
}
@if ($screen == xxl) {
@media (min-width: $screen-xxl) {
@include make-col($column, $columns, $gutter);
}
}
}
//------------------------------------------------------------------------------
// Генератор правил для отступа одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: 1 ширина отступа (кол-во колонок)
// $columns: $grid-columns; общее количество ячеек на 1 ряд
//------------------------------------------------------------------------------
@mixin col-offset (
$screen: xs,
$column: 1,
$columns: $grid-columns
) {
@if ($screen == xs) {
margin-left: ($column * 100% / $columns);
}
@if ($screen == sm) {
@media (min-width: $screen-sm) {
margin-left: ($column * 100% / $columns);
}
}
@if ($screen == md) {
@media (min-width: $screen-md) {
margin-left: ($column * 100% / $columns);
}
}
@if ($screen == lg) {
@media (min-width: $screen-lg) {
margin-left: ($column * 100% / $columns);
}
}
@if ($screen == xl) {
@media (min-width: $screen-xl) {
margin-left: ($column * 100% / $columns);
}
}
@if ($screen == xxl) {
@media (min-width: $screen-xxl) {
margin-left: ($column * 100% / $columns);
}
}
}