SCSS Maps

In Maps lassen sich Schlüssel-Wert-Paare definieren.

Beispiel mit Breakpoints für Media Queries:

$mq-breakpoints: (
    mobile: 320px,
    tablet: 740px,
    desktop: 980px,
    wide: 1280px,
    ultrawide: 1400px,
 
    // Special cases:
    nav: 580px
);

Das obige Beispiel kann mit sass-mq verwendet werden.

Einzelne Werte aus Sass Maps auslesen

Mit map-get() kann man einzelne Werte aus einer Map erhalten.

Um beim Beispiel mit den Breakpoints zu bleiben: manchmal ist es praktisch, den Pixelwert eines Breakpoints einem bestimmten Element zuzuweisen.

element {
    max-width: map-get($mq-breakpoints, wide);
}

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

SCSS Maps

Einzelne Werte aus Sass Maps auslesen

Seiten-Werkzeuge