_breakpoints.scss

$breakpoints: (
    "xs": 0,
    "sm": 480px,
    "md": 720px,
    "lg": 960px,
    "xl": 1200px
);

@mixin xs {
    @media (min-width: map-get($breakpoints, "xs")) {
        @content;
    }
}

@mixin sm {
    @media (min-width: map-get($breakpoints, "sm")) {
        @content;
    }
}

@mixin md {
    @media (min-width: map-get($breakpoints, "md")) {
        @content;
    }
}

@mixin lg {
    @media (min-width: map-get($breakpoints, "lg")) {
        @content;
    }
}

@mixin xl {
    @media (min-width: map-get($breakpoints, "xl")) {
        @content;
    }
}

@mixin breakpoint ($bp: 0) {
    @media (min-width: $bp) {
        @content;
    }
}

.responsive-text {
    @include xs {
        color: red;
    }

    @include sm {
        color: blue;
    }

    @include md {
        color: green;
    }

    @include lg {
        color: purple;
    }

    @include xl {
        color: orange;
    }

    @include breakpoint(1400px) {
        color: pink;
    }
}