a responsive mixin in SCSS

responsive.scss

// SO responsive mixin
// a mixin is different from a function as it does not return a value but serves as placeholder for code
@mixin responsive( $breakpoint ) {
    /*
        breakpoints are viewport arbitrary values,
        they are defined with the aim of allowing the SCSS/CSS code of your app' behave accordingly to your user's device width,
        the breakpoints I used were inspired by Bootstrap =>
        https://getbootstrap.com/docs/5.0/layout/breakpoints/
    */
    @if $breakpoint == smartphone-portrait {
        @media only screen and ( max-width: 575.98px ) {
            @content;
        }
    }
    @if $breakpoint == smartphone-landscape {
        @media only screen and ( min-width: 575.99px ) and ( max-width: 767.98px ) {
            @content;
        }
    }
    @if $breakpoint == tablet {
        @media only screen and ( min-width: 767.99px ) and ( max-width: 1199.97px ) {
            @content;
        }
    }
    @if $breakpoint == laptop {
        @media only screen and ( min-width: 1199.98px  ) and ( max-width: 1399.98px ) {
            @content;
        }
    }
    @if $breakpoint == desktop {
        @media only screen and ( min-width: 1399.99px ) {
            @content;
        }
    }
}
// EO responsive mixin

//example of how to use the mixin in your SCSS code (inside a given selector)
// .myCLass {
//   @include responsive(smartphone-portrait) {
  //   font-size: 15px;
   //}
//}