possible solution for #8257

scss/components/_dropdown-menu.scss

@@ -124,7 +124,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include dropdown-menu-direction(horizontal);

scss/components/_media-object.scss

@@ -75,13 +75,13 @@ $mediaobject-image-width-stacked: 100% !default;
     }
 
     @if $global-flexbox {
-      &.stack-for-small {
+      &.stack-for-#{$-zf-zero-breakpoint} {
         flex-wrap: wrap;
       }
     }
 
-    &.stack-for-small .media-object-section {
-      @include breakpoint(small only) {
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }
     }

scss/components/_menu.scss

@@ -234,7 +234,7 @@ $menu-icon-spacing: 0.25rem !default;
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include menu-direction(horizontal);

scss/components/_off-canvas.scss

@@ -162,7 +162,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 
   // Reveal off-canvas menu on larger screens
   @each $name, $value in $breakpoint-classes {
-    @if $name != small {
+    @if $name != $-zf-zero-breakpoint {
       @include breakpoint($name) {
         .position-left.reveal-for-#{$name} {
           @include off-canvas-reveal(left);

scss/components/_reveal.scss

@@ -153,7 +153,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
       @include reveal-modal-fullscreen;
     }
 
-    @include breakpoint(small only) {
+    @include breakpoint($-zf-zero-breakpoint only) {
       @include reveal-modal-fullscreen;
     }
 

scss/components/_top-bar.scss

@@ -128,7 +128,7 @@ $topbar-unstack-breakpoint: medium !default;
 
     // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         &.stacked-for-#{$size} {
           @include breakpoint($size down) {
             @include top-bar-stacked;

scss/components/_visibility.scss

@@ -68,7 +68,7 @@
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
-    @if $size != small {
+    @if $size != $-zf-zero-breakpoint {
       .hide-for-#{$size} {
         @include hide-for($size);
       }

scss/grid/_flex-grid.scss

@@ -213,7 +213,7 @@
       }
     }
 
-    @if $-zf-size != small {
+    @if $-zf-size != $-zf-zero-breakpoint {
       // Sizing (expand)
       @include breakpoint($-zf-size) {
         .#{$-zf-size}-expand {

scss/grid/_row.scss

@@ -80,7 +80,7 @@
 /// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
 @mixin grid-row-nest($gutter: $grid-column-gutter) {
   @if type-of($gutter) == 'number' {
-    $gutter: (small: $gutter);
+    $gutter: ($-zf-zero-breakpoint: $gutter);
   }
 
   @each $breakpoint, $value in $gutter {

scss/typography/_alignment.scss

@@ -6,7 +6,7 @@
   @each $size in $breakpoint-classes {
     @include breakpoint($size) {
       @each $align in (left, right, center, justify) {
-        @if $size != 'small' {
+        @if $size != $-zf-zero-breakpoint {
           .#{$size}-text-#{$align} {
             text-align: $align;
           }

scss/util/_breakpoint.scss

@@ -18,11 +18,12 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
-@if not map-has-key($breakpoints, small) or not map-has-key($breakpoints, medium) {
-  @error 'Your list of breakpoints (defined in $breakpoints) must include one named "small" and one named "medium".';
-}
-@else if map-get($breakpoints, small) != 0 {
-  @error 'Your "small" breakpoint (defined in $breakpoints) must be set to "0".';
+$-zf-zero-breakpoint: small !default;
+
+@if nth(map-values($breakpoints),1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+} @else {
+  $-zf-zero-breakpoint: nth(map-keys($breakpoints),1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -32,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+@function breakpoint($val: $-zf-zero-breakpoint) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries

scss/util/_mixins.scss

@@ -220,7 +220,7 @@
   $map: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, small);
+    $map: map-remove($map, $-zf-zero-breakpoint);
   }
 
   @each $size in $map {