mixin media with breakpoint and custom value - sass

Question

I tried to use this mixin for media queries in SASS.
$breakpoints: (
extrasmall : 480px,
small : 600px,
medium: 768px,
large : 1025px
) !default;
#mixin media($keys...) {
#each $key in $keys {
#media (min-width: map-get($breakpoints, $key)){
#content;
}
}
}
The breakpoints works fine and I'm particulary glad of it, BUT I have an exception
.slider {
justify-content: flex-start;
#include media(715px) {
justify-content: center;
}
}
What can I change in my mixin to accept breakpoints OR custom value ?

Answer 1

To accomplish this one option would be to use an #if and #else statement to check if there is a custom value. I had to change your mixin slightly to get this to work:
$breakpoints: (
'extrasmall' : 480px,
'small' : 600px,
'medium': 768px,
'large' : 1025px
) !default;
#mixin media($break, $customValue, $custom: false) {
#if $custom {
#media (min-width: $customValue){
#content;
}
} #else {
$value: map-get($breakpoints, $break);
#media (min-width: $value) {
#content;
}
}
}
.test{
#include media(medium,0,$custom: false){
display: flex;
}
}
.slider {
justify-content: flex-start;
#include media('',"715px", $custom: true) {
justify-content: center;
}
}
Another option (without changing your mixin) would be to create a new mixin to merge a new value with the $breakpoints map, since maps are immutable. Your new mixin would look something like this:
#mixin add-breakpoint($size, $width) {
$breakpoints: map.merge($breakpoints, ($size: $width)) !global;
}
Then you would use this mixin in your SASS like so:
#include add-breakpoint("slider", 715px);
and then
.slider {
justify-content: flex-start;
#include media("slider") {
justify-content: center;
}
}
Also, it is typical to put the map keys in quotations, here is the entire example:
#use "sass:map";
$breakpoints: (
'extrasmall' : 480px,
'small' : 600px,
'medium': 768px,
'large' : 1025px
) !default;
#mixin media($keys...) {
#each $key in $keys {
#media (min-width: map-get($breakpoints, $key)){
#content;
}
}
}
#mixin add-breakpoint($size, $width) {
$breakpoints: map.merge($breakpoints, ($size: $width)) !global;
}
#include add-breakpoint("slider", 715px);
.slider {
justify-content: flex-start;
#include media("slider") {
justify-content: center;
}
}