Skip to content

K
kpp
Commit 5f824c90 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Портировал примеси-генераторы правил модульной сетки

parent cf238eac
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 183 deletions
src/scss/mixins/grid-mixins.scss
View file @ 5f824c90
......@@ -88,7 +88,10 @@ $grid-gutter-width: 30px !default;
display: flex;
flex-wrap: wrap;
// Если первая переданная переменная не ноль — выводим margin-ы по умолчанию
& > * {
flex-basis: 100%;
}
@if ($xs-grid-gutter != 0) {
margin-left: ($xs-grid-gutter / -2);
margin-right: ($xs-grid-gutter / -2);
......@@ -137,222 +140,160 @@ $grid-gutter-width: 30px !default;
// //------------------------------------------------------------------------------
// // Генератор ширины ячейки
// //------------------------------------------------------------------------------
// // Принимает:
// // @column: 1 - ширина (кол-во колонок в этой ячейке)
// // @columns: @grid-columns; - количество ячеек в ряду
// //
// // Возвращает переменную @width в контекст вызова.
// //------------------------------------------------------------------------------
// .get-width(@column: 1, @columns: @grid-columns) {
// @width: (100% / @columns) * @column;
// }
// //------------------------------------------------------------------------------
// // Генератор правил для одной ячейки
// //------------------------------------------------------------------------------
// // Принимает:
// // @column: 1 - ширина (кол-во колонок для этой ячейки)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// // @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
// //------------------------------------------------------------------------------
// .make-col(@column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
// .get-width(@column, @columns); // Вернёт @width с шириной в процентах
// display: block;
// flex: 0 0 @width;
// max-width: @width;
// // ВНИМАНИЕ! если @gutter = false, в CSS не попадут правила padding-left и padding-right
// & when not (@gutter = false) {
// padding-left: (@gutter / 2);
// padding-right: (@gutter / 2);
// }
// }
// //------------------------------------------------------------------------------
// // Генератор правил для одной ячейки с возможностью указать @media
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// // @column: 1 - ширина (кол-во колонок для этой ячейки)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// // @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
// //------------------------------------------------------------------------------
// // Примеры: http://codepen.io/nicothin/pen/obRMgx?editors=1100
// //------------------------------------------------------------------------------
// .col(@screen: xs, @column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
// & when (@screen = xs) {
// .make-col(@column, @columns, @gutter);
// }
// & when (@screen = sm) {
// @media (min-width: @screen-sm) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = md) {
// @media (min-width: @screen-md) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = lg) {
// @media (min-width: @screen-lg) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = xl) {
// @media (min-width: @screen-xl) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = xxl) {
//------------------------------------------------------------------------------
// Генератор ширины ячейки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок в этой ячейке)
// $columns: $grid-columns; количество ячеек в ряду
//------------------------------------------------------------------------------
// @media (min-width: @screen-xxl) {
// .make-col(@column, @columns, @gutter);
// }
// }
// }
@mixin get-width ($column: 1, $columns: $grid-columns) {
$width: (100% / $columns) * $column;
flex: 0 0 $width;
max-width: $width;
}
// //------------------------------------------------------------------------------
// // Генератор правил для отступа одной ячейки с возможностью указать @media
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// // @column: 1 - ширина отступа (кол-во колонок)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// //------------------------------------------------------------------------------
// .col-offset(@screen: xs, @column: 1, @columns: @grid-columns) {
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество ячеек на 1 ряд
// $gutter: $grid-gutter-width промежуток между ячейками или false
//------------------------------------------------------------------------------
// & when (@screen = xs) {
// margin-left: (@column * 100% / @columns);
// }
@mixin make-col (
$column: 1,
$columns: $grid-columns,
$gutter: $grid-gutter-width
) {
@include get-width($column, $columns);
// & when (@screen = sm) {
// ВНИМАНИЕ!
// если $gutter == false, правила padding-left и padding-right отсутствуют
@if ($gutter != false) {
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
}
// @media (min-width: @screen-sm) {
// margin-left: (@column * 100% / @columns);
// }
// }
// & when (@screen = md) {
// @media (min-width: @screen-md) {
// margin-left: (@column * 100% / @columns);
// }
// }
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: $grid-columns ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество колонок
// $gutter: $grid-gutter-width промежуток между ячейками
//------------------------------------------------------------------------------
// & when (@screen = lg) {
@mixin col (
$screen: xs,
$column: $grid-columns,
$columns: $grid-columns,
$gutter: $grid-gutter-width
) {
// @media (min-width: @screen-lg) {
// margin-left: (@column * 100% / @columns);
// }
// }
@if ($screen == xs) {
@include make-col($column, $columns, $gutter);
}
// & when (@screen = xl) {
@if ($screen == sm) {
// @media (min-width: @screen-xl) {
// margin-left: (@column * 100% / @columns);
// }
// }
@media (min-width: $screen-sm) {
@include make-col($column, $columns, $gutter);
}
}
// & when (@screen = xxl) {
@if ($screen == md) {
// @media (min-width: @screen-xxl) {
// margin-left: (@column * 100% / @columns);
// }
// }
// }
@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);
}
}
// //------------------------------------------------------------------------------
// // Генератор списка селекторов .col-[указанный тип]-[] и их общих свойств
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
@if ($screen == xl) {
// .make-column-list-general-rules(@screen: xs) {
@media (min-width: $screen-xl) {
@include make-col($column, $columns, $gutter);
}
}
// .column-list(@index) {
// @item: ~'.col-@{screen}-@{index}';
// .column-list((@index + 1), @item);
// }
@if ($screen == xxl) {
// .column-list(@index, @list) when (@index =< @grid-columns) {
// @item: ~'.col-@{screen}-@{index}';
// .column-list((@index + 1), ~'@{list}, @{item}');
// }
@media (min-width: $screen-xxl) {
@include make-col($column, $columns, $gutter);
}
}
}
// .column-list(@index, @list) when (@index > @grid-columns) {
// @{list} {
// display: block;
// flex: 0 0 100%;
// width: 100%;
// padding-left: (@grid-gutter-width / 2);
// padding-right: (@grid-gutter-width / 2);
// }
// }
// .column-list(1);
// }
//------------------------------------------------------------------------------
// Генератор правил для отступа одной ячейки с возможностью указать @media,
// начиная с ширины которого правила ширины ячейки будут срабатывать
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: 1 ширина отступа (кол-во колонок)
// $columns: $grid-columns; общее количество колонок
//------------------------------------------------------------------------------
@mixin col-offset (
$screen: xs,
$column: 1,
$columns: $grid-columns
) {
@if ($screen == xs) {
margin-left: ($column * 100% / $columns);
}
// //------------------------------------------------------------------------------
// // Генератор селекторов .col-[указанный тип]-[] и их индивидуальных свойств (ширин)
// //------------------------------------------------------------------------------
// // Принимает:
// // @n: - количество колонок
// // @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
@if ($screen == sm) {
// .make-columns(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
@media (min-width: $screen-sm) {
margin-left: ($column * 100% / $columns);
}
}
// .col-@{screen}-@{i} {
// .make-col(@i, @n, false)
// }
@if ($screen == md) {
// .make-columns(@n, @screen, (@i + 1));
// }
@media (min-width: $screen-md) {
margin-left: ($column * 100% / $columns);
}
}
@if ($screen == lg) {
@media (min-width: $screen-lg) {
margin-left: ($column * 100% / $columns);
}
}
// //------------------------------------------------------------------------------
// // Генератор селекторов .col-[]-offset-[] и их индивидуальных свойств (margin-left)
// //------------------------------------------------------------------------------
// // Принимает:
// // @n: - количество колонок
// // @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
@if ($screen == xl) {
// .make-offsets(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
@media (min-width: $screen-xl) {
margin-left: ($column * 100% / $columns);
}
}
// .col-@{screen}-offset-@{i} {
// margin-left: (@i * 100% / @n);
// }
@if ($screen == xxl) {
// .make-offsets(@n, @screen, (@i + 1));
// }
@media (min-width: $screen-xxl) {
margin-left: ($column * 100% / $columns);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment