Sass Breakpoint Mixin

Das ist wohl das von mir am häufigsten genutzt Mixin was ich habe. OK, vielleicht liegt das Mixin für Columns noch etwas weiter vorn… Aber so genau nehmen wir das jetzt mal nicht. Warum das Mixin so häufig zum Einsatz kommt ist recht einfach erklärt. Ich hänge die Breakpoints direkt an die jeweilige Klasse bzw. das Element. Führt wohl zu etwas mehr CSS-Code der dadurch aber auch einfacher zu verstehen und pflegen ist. Kommen wir zum Mixin und wie ich es nutze.


Breakpoint Settings

/* --------------------------------------------------
   Breakpoint Settings
-------------------------------------------------- */
// min or max
$media-direction: min; // min / max — default is min (mobile first)
// Breakpoints
// A Sass Map for all Breakpoints you need. But keep it simple! Just add Sizes that you need several times.
// Here are my basic set. I change the values a bit from project to project
$breakpoints: (
'default': '',
'xs': 480px,
's': 667px,
'm': 1024px,
'l': 1280px,
'xl': 1680px,
);

Sass Breakpoint Mixin

/* --------------------------------------------------
   Breakpoint Mixin
-------------------------------------------------- */
// $breakpoint = die Größe die ihr braucht.
// Ihr könnt aber auch anstelle von 'xs', 's', 'm', 'l', 'xl' einfach einen Wert eintragen.
// Das macht Sinn wenn man mal einen speziellen Breakpoint braucht. Den muss man dann nicht zwingend in die Sass Map packen.
// $direction: $media-direction = das was ihr in den Settings eingestellt habt.
@mixin breakpoint($breakpoint,$direction: $media-direction) {
  // Es wird gecheckt ob der Wert in der Sass Map vorhanden ist
@if map-has-key($breakpoints, $breakpoint) {
    // Ausgabe
@media
(#{$direction}-width: #{map-get($breakpoints, $breakpoint)}) {
@content;
}
}
  // Wenn ihr oben einen Wert eingetragen habt wird hier gecheckt ob ihr einen Einheit angehängt habt. Falls nicht wird px genutzt.
@else if unitless($breakpoint) {
$breakpoint: $breakpoint + 0px;
    // Ausgabe
@media (#{$direction}-width: $breakpoint) {
@content;
}
}
}

Angewendet schaut das dann so aus

// Unser Sass File
.box {
width: 100%;
padding: 20px;
background-color: red;
color: white;
  @include breakpoint('s') {
width: 80%;
padding: 40px;
background-color: blue;
}
  @include breakpoint('m') {
padding: 80px;
}
}
// Daraus wird dann folgender CSS-Code
.box {
width: 100%;
padding: 20px;
background-color: red;
color: white;
}
@media (min-width: 667px) {
.box {
width: 80%;
padding: 40px;
background-color: blue;
}
}
@media (min-width: 1024px) {
.box {
padding: 80px;
}
}

Fragen oder Anregung für Verbesserungen? Ab damit in die Kommentare. Für alle die gern noch mehr Features brauchen / wollen gibt es noch “Include Media” von Eduardo & Hugo. Vielleicht wechsle ich über kurz oder lang auch zu dem. Bisher hab ich die Sachen nicht gebraucht aber spätestens wenn macht es wohl Sinn.

Der Artikel ist auch auf meiner Website zu finden.