feat: add new mixin for breakpoint that match exactly

src/sass/abstracts/_mixins.scss

@@ -4,7 +4,7 @@
 @import "../layout/_grid";
 @import "./variables";
 
-$breakpoints-media: (
+$breakpoints-media-min: (
   xs: (min-width: map-get($breakpoints-values, 'xs')),
   sm: (min-width: map-get($breakpoints-values, 'sm')),
   md: (min-width: map-get($breakpoints-values, 'md')),
@@ -18,13 +18,20 @@ $breakpoints-media-max: (
   lg: (max-width: map-get($breakpoints-values, 'lg'))
 ) !default;
 
+$breakpoints-media-interval: (
+  xs: "(min-width: #{map-get($breakpoints-values, 'xs')}) and (max-width: #{map-get($breakpoints-values, 'sm')})",
+  sm: "(min-width: #{map-get($breakpoints-values, 'sm')}) and (max-width: #{map-get($breakpoints-values, 'md')})",
+  md: "(min-width: #{map-get($breakpoints-values, 'md')}) and (max-width: #{map-get($breakpoints-values, 'lg')})",
+  lg: "(min-width: #{map-get($breakpoints-values, 'lg')})"
+) !default;
+
 // This mixin apply SCSS when width of screen is >= to the breakpoint in parameter (because we are mobile first for design)
 // Example : if respond-to('md') is used, the css rules are applied only if current width is >= to md breakpoint and not apply if current width is < to md breakpoint.
 @mixin respond-to-breakpoint-and-bigger($br) {
   // If the key exists in the map
-  @if map-has-key($breakpoints-media, $br) {
+  @if map-has-key($breakpoints-media-min, $br) {
     // Prints a media query based on the value
-    @media #{inspect(map-get($breakpoints-media, $br))} {
+    @media #{inspect(map-get($breakpoints-media-min, $br))} {
       @content;
     }
   }
@@ -32,7 +39,7 @@ $breakpoints-media-max: (
     // If the key doesn't exist in the map
   @else {
     @warn "Unfortunately, no value could be retrieved from `#{$br}`. "
-        + "Available breakpoints are: #{map-keys($breakpoints-media)}.";
+        + "Available breakpoints are: #{map-keys($breakpoints-media-min)}.";
   }
 }
 
@@ -54,6 +61,22 @@ $breakpoints-media-max: (
   }
 }
 
+@mixin respond-to-breakpoint($br) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints-media-interval, $br) {
+    // Prints a media query based on the value
+    @media #{map-get($breakpoints-media-interval, $br)} {
+      @content;
+    }
+  }
+
+    // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$br}`. "
+        + "Available breakpoints are: #{map-keys($breakpoints-media-interval)}.";
+  }
+}
+
 
 @mixin content() {
   :host {