
$breakpoints: (
    "phone": 600px,
    "desktop": 1200px
);

// à partir de cette taille
@mixin media_min($key) {
    @media (min-width: map-get($breakpoints,$key)) {
        &{ @content; }
    }
}

// jusqu'à cette taille
@mixin media_max($key) {
    @media (max-width: map-get($breakpoints,$key)) {
        &{ @content; }
    }
}

// Entre minumum et maximum
// media_minmax("phone","desktop") = tablette
@mixin media_minmax($key_min, $key_max) {
    @media (min-width: map-get($breakpoints,$key_min)) and (max-width: map-get($breakpoints,$key_max)) {
        &{ @content; }
    }
}
