From: Nicolas Coden Date: Tue, 17 Jul 2018 20:45:41 +0000 (+0200) Subject: refactor: move "-zf-each-breakpoint()" mixin iteration logics to "-zf-each-breakpoint()" X-Git-Tag: v6.6.0~3^2~68^2~18 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d7f18d19512ecb17a0844ba9ad3385cb7b166142;p=thirdparty%2Ffoundation%2Ffoundation-sites.git refactor: move "-zf-each-breakpoint()" mixin iteration logics to "-zf-each-breakpoint()" Changes: * Add mixin `-zf-each-breakpoint-in()` * Add function `-zf-bool()` to convert values to Booleans * Refactor mixin `-zf-each-breakpoint()` to rely on `-zf-each-breakpoint-in()` There should be no change in the `-zf-each-breakpoint` API --- diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss index 89ef0c3ff..90a00bae3 100644 --- a/scss/util/_mixins.scss +++ b/scss/util/_mixins.scss @@ -268,22 +268,64 @@ /// /// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up. /// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid. -@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) { - $list: $breakpoint-classes; +@mixin -zf-each-breakpoint( + $small: true, + $auto-insert-breakpoints: true +) { + @include -zf-each-breakpoint-in(auto, -zf-bool($small), -zf-bool($auto-insert-breakpoints)) { + @content + }; +} - @if not $small { - $list: sl-remove($list, $-zf-zero-breakpoint); +/// Iterates with `@content` through the given list of breakpoints `$breakpoints`. +/// +/// @access private +/// +/// @param {Keyword|List} $breakpoints [auto] - Breakpoints to iterates on. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. +/// @param {Boolean|Null} $zero-breakpoint [null] - Whether the zero-breakpoint (often `small`) must be included. If `true`, it will always be added to the list if not already there. If `false`, it will always be removed. Does nothing by default. +/// @param {Boolean|Keyword} $media-queries [true] - Whether media-queries must be generated. If `for-lists`, only generate media-queries when `$breakpoints` is a list. +@mixin -zf-each-breakpoint-in( + $breakpoints: auto, + $zero-breakpoint: null, + $media-queries: true +) { + $-list: (); + $-breakpoints-is-a-list: true; + + // Retrieve the list of breakpoint(s) to iterate on. + @if $breakpoints == auto { + $-list: $breakpoint-classes; + } + @else if type-of($breakpoints) == 'list' { + $-list: $breakpoints; + } + @else if type-of($breakpoints) == 'string' { + $-list: ($breakpoints); + $-breakpoints-is-a-list: false; + } + @else { + @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"'; + } + + // Add or remove the zero breakpoint according to `$zero-breakpoint` + @if $zero-breakpoint == true { + $-list: join(($-zf-zero-breakpoint), sl-remove($-list, $-zf-zero-breakpoint)); + } + @else if $zero-breakpoint == false { + $-list: sl-remove($-list, $-zf-zero-breakpoint); } - @each $name in $list { + // Iterate on breakpoint(s) + @each $bp in $-list { $old-zf-size: null; @if global-variable-exists(-zf-size) { $old-zf-size: $-zf-size; } - $-zf-size: $name !global; + $-zf-size: $bp !global; - @if $auto-insert-breakpoints { - @include breakpoint($name) { + @if ($media-queries == true + or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) { + @include breakpoint($bp) { @content; } } diff --git a/scss/util/_value.scss b/scss/util/_value.scss index a063a82af..cde5d37f8 100644 --- a/scss/util/_value.scss +++ b/scss/util/_value.scss @@ -158,3 +158,14 @@ @error '`#{$map}` is not a valid map'; } } + +/// Convert the given `$val` to a Boolean. Empty values are considered as false. +//// +/// @access private +/// +/// @param {*} $val - Value to convert. +/// +/// @returns {Boolean} Converted Boolean value. +@function -zf-bool($val) { + @return $val != false and has-value($val); +}