From d199ab7c52ea7c67e397e490a181692167cdbebe Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sat, 3 Dec 2016 12:54:57 +0100 Subject: [PATCH] Factorize breakpoint map handling in grid gutters and margins Factorize breakpoint map handling in `grid-column-gutter` and `grid-column-margin` mixins. Changes: - Add the `-zf-breakpoint-value` mixin which generate its content with the value `$-zf-bp-value` depending on its parameter, like `grid-column-gutter` and `grid-column-margin` did (see the `@mixin -zf-breakpoint-value` doc) - Use the `-zf-breakpoint-value` mixin in `grid-column-gutter` and `grid-column-margin` and remove duplicated code. - Rename the `grid-column-gutter` function to `-zf-breakpoint-value` and move it to `/scss/util/_breakpoint.scss`. This function had a generic behaviour. --- scss/grid/_gutter.scss | 55 ++++---------------------------------- scss/grid/_row.scss | 2 +- scss/util/_breakpoint.scss | 18 +++++++++++++ scss/util/_mixins.scss | 33 +++++++++++++++++++++++ 4 files changed, 57 insertions(+), 51 deletions(-) diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss index 3d9b31183..cbc5e5a39 100644 --- a/scss/grid/_gutter.scss +++ b/scss/grid/_gutter.scss @@ -6,24 +6,6 @@ /// @group grid //// -/// Get a gutter size for a given breakpoint -/// @param {Keyword} $breakpoint [small] - Breakpoint name. -/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default. -/// -/// @returns {Number} Gutter size. -@function grid-column-gutter( - $breakpoint: $-zf-zero-breakpoint, - $gutters: $grid-column-gutter -) { - // If gutter is single value, return it - @if type-of($gutters) == 'number' { - @return $gutters; - } - - // Else, return the corresponding responsive value - @return -zf-get-bp-val($gutters, $breakpoint); -} - /// Set the gutters on a column /// @param {Number|Keyword} $gutter [auto] /// Spacing between columns, accepts multiple values: @@ -35,22 +17,8 @@ $gutter: auto, $gutters: $grid-column-gutter ) { - @if $gutter == auto and type-of($gutters) == 'map' { - // "auto" - @each $breakpoint, $value in $gutters { - @include breakpoint($breakpoint) { - @include grid-column-gutter($value); - } - } - } - @else { - // breakpoint name - @if type-of($gutter) == 'string' { - $gutter: grid-column-gutter($gutter, $gutters); - } - - // single value - $padding: rem-calc($gutter) / 2; + @include -zf-breakpoint-value($gutter, $gutters) { + $padding: rem-calc($-zf-bp-value) / 2; padding-right: $padding; padding-left: $padding; @@ -103,23 +71,10 @@ $margin: auto, $margins: $grid-column-gutter ) { - @if $margin == auto and type-of($margins) == 'map' { - // "auto" - @each $breakpoint, $value in $margins { - @include breakpoint($breakpoint) { - @include grid-column-margin($value); - } - } - } @else { - // breakpoint name - @if type-of($margin) == 'string' { - $margin: grid-column-gutter($margin, $margins); - } - - // single value - $margin-bottom: rem-calc($margin); + @include -zf-breakpoint-value($margin, $margins) { + $margin-bottom: rem-calc($-zf-bp-value); margin-bottom: $margin-bottom; - + > :last-child { margin-bottom: 0; } diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss index 36c7c192e..b84f9c03e 100644 --- a/scss/grid/_row.scss +++ b/scss/grid/_row.scss @@ -80,7 +80,7 @@ /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default. @mixin grid-row-nest($gutters: $grid-column-gutter) { @include -zf-each-breakpoint { - $margin: rem-calc(grid-column-gutter($-zf-size, $gutters)) / 2 * -1; + $margin: rem-calc(-zf-breakpoint-value($-zf-size, $gutters)) / 2 * -1; margin-right: $margin; margin-left: $margin; diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss index 50f6f22b9..f4b142f09 100644 --- a/scss/util/_breakpoint.scss +++ b/scss/util/_breakpoint.scss @@ -248,6 +248,24 @@ $breakpoint-classes: (small medium large) !default; } } +/// Get a value in a map for a given breakpoint name +/// @param {Keyword} $bp-name [small] - Breakpoint name. +/// @param {Number|Map} $bp-values-map - Map of breakpoints and values or single value to use. +/// +/// @returns {Number} Breakpoint-related value from `$bp-values-map`. +@function -zf-breakpoint-value( + $bp-name: $-zf-zero-breakpoint, + $bp-values-map: null +) { + // If the map is a single value, return it + @if type-of($bp-values-map) == 'number' { + @return $bp-values-map; + } + + // Else, return the corresponding breakpoint value + @return -zf-get-bp-val($bp-values-map, $bp-name); +} + // Legacy breakpoint variables // These will be removed in 6.3 $small-up: null; diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss index 353bc32fc..aae42d89c 100644 --- a/scss/util/_mixins.scss +++ b/scss/util/_mixins.scss @@ -242,3 +242,36 @@ } } } + +/// Generate the content passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter. +/// @param {Number|Keyword} $name [auto] +/// The $name parameter accepts multiple values: +/// - A single value will be directly passed as `$-zf-bp-value` to the mixin content. +/// - A breakpoint name will make `$-zf-bp-value` the corresponding value in `$map`. +/// - "auto" will generate the mixin content for each breakpoint in `$map` with the corresponding value as `$-zf-bp-value`. +/// @param {Number|Map} $map - Map of breakpoints and values or single value to use. +@mixin -zf-breakpoint-value( + $name: auto, + $map: null +) { + @if $name == auto and type-of($map) == 'map' { + // "auto" + @each $k, $v in $map { + @include breakpoint($k) { + @include -zf-breakpoint-value($v, $map) { + @content; + } + } + } + } + @else { + // breakpoint name + @if type-of($name) == 'string' { + $name: -zf-breakpoint-value($name, $map); + } + + // breakpoint value + $-zf-bp-value: $name !global; + @content; + } +} -- 2.47.2