diff --git a/scss/_variables.scss b/scss/_variables.scss index 4b5af26ad0..1a68a1fbf1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -58,12 +58,12 @@ } } -/// Replace `$search` with `$replace` in `$string` -/// @author Hugo Giraudel -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string +// Replace `$search` with `$replace` in `$string` +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); @@ -74,6 +74,15 @@ @return $string; } +@mixin _assert-starts-at-zero($map) { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + } +} + + // General variable structure // // Variable format should follow the `$component-modifier-state-property` order. @@ -172,6 +181,7 @@ $grid-breakpoints: ( xl: 1200px ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints); // 7. Grid containers