CSS Media Queries in SCSS via include einbinden

Ich finde es einfacher, CSS Befehle für bestimmte Bildschirm-Weiten direkt im jeweiligen Selektor einzufügen anstelle mit einem @media screen and … Block zu arbeiten.

Via SCSS kann das via @mixin & @include erreicht werden.

SCSS

// Beispiel-Variablen für Mixins festlegen.
$1: 1px;
$768: 768px;
$769: 769px;
$1024: 1024px;
$1025: 1025px;
$col-red: red;
$col-yellow: yellow;

// Mixins mit Beispiel-Variablen einrichten
@mixin max-769 {
    @media screen and (max-width: #{$769}) {
        @content;
    }
}
@mixin tablet-only {
    @media screen and (min-width: #{$769}) and (max-width: #{$1024}) {
        @content;
    }
}

// Via include die Mixins beim gewünschten Selektor einfügen
.content-wrapper {
    width: 70%;
    background-color: $col-red;
    
    @include max-769 {
        width: 100%;
    }
    @include tablet-only {
        background-color: $col-yellow;
    }
}

Backup Code

SCSS

// Base Variables for Media Queries
$1: 1px;
$375: 375px;
$376: 376px;
$480: 480px;
$481: 481px;
$768: 768px;
$769: 769px;
$1024: 1024px;
$1025: 1025px;
$1280: 1280px;
$1281: 1281px;

// Mixins to register Device-Widths
@mixin mobile-s {
    @media screen and (min-width: #{$1}) and (max-width: #{$375}) {
        @content;
    }
}
@mixin mobile {
    @media screen and (min-width: #{$376}) and (max-width: #{$480}) {
        @content;
    }
}
@mixin tablet-s {
    @media screen and (min-width: #{$481}) and (max-width: #{$768}) {
        @content;
    }
}
@mixin tablet {
    @media screen and (min-width: #{$769}) and (max-width: #{$1024}) {
        @content;
    }
}
@mixin desktop-s {
    @media screen and (min-width: #{$1025}) and (max-width: #{$1280}) {
        @content;
    }
}
@mixin desktop {
    @media screen and (min-width: #{$1281}) {
        @content;
    }
}