Setting up scss settings

Hello friends, after I successfully deployed my websites I needed to make adjustments to the mobile design of my intro page. It currently doesn't work at all and luckily I was able to have used this kind of structure in a project I worked on before. I'll share this with you and document for me as well.

_settings.scss

// Media widths
$mobile: 45rem; // 720px
$tablet: 75rem; // 1200px
$desktop: 90rem; // 1440px
$desktop-large: 120rem; // 1920px
$content-max-width: 1440px;
$content-inner-width: 880px;

// Media Queries
$screen: "only screen" !default;

$landscape: "(orientation: landscape)" !default;
$portrait: "(orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{$mobile})" !default;

$medium-up: "#{$screen} and (min-width: #{$mobile})" !default;
$medium-only: "#{$screen} and (min-width: #{$mobile}) and (max-width: #{$tablet})" !default;

$large-up: "#{$screen} and (min-width: #{$tablet})" !default;
$large-only: "#{$screen} and (min-width: #{$tablet}) and (max-width: #{$desktop})" !default;

$xlarge-up: "#{$screen} and (min-width: min-width: #{$desktop})" !default;
$xlarge-only: "#{$screen} and (min-width: min-width: #{$desktop}) and (max-width: #{$desktop-large})" !default;

$xxlarge-up: "#{$screen} and (min-width: #{$desktop-large})" !default;

_mixins.scss

with the help of mixins I will apply styles to the breakpoints. I decided for my current setup that these three breakpoints are enough. Otherwise I would have gone with bootstrap or the like.

@mixin mobile {
  @media #{$small-only} {
    @content;
  }
}

@mixin tablet {
  @media #{$medium-only} {
    @content;
  }
}

@mixin desktop {
  @media #{$large-up} {
    @content;
  }
}

a sample usage could then look like this. Thanks to the _settings.scss it is an easy task to extend for example the tablet-portrait breakpoint. (Try it yourself!)

  display: grid;
  gap: 0 100px;
  grid-template-columns: repeat(3, 1fr);

  @include desktop {
    grid-template-rows: repeat(2, 1fr);
  }

  @include tablet {
    grid-template-rows: repeat(1, 1fr);
  }

  @include tablet-portrait {
    grid-template-rows: repeat(2, 1fr);
  }

  @include mobile {
    padding: 20px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: none;
    gap: 20px 0;
  }