Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:scss:maps

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

css:scss:maps [2019/09/27 17:39] (aktuell)
admin angelegt
Zeile 1: Zeile 1:
 +====== SCSS Maps ======
  
 +In Maps lassen sich Schlüssel-Wert-Paare definieren.
 +
 +Beispiel mit Breakpoints für Media Queries:
 +
 +<code sass>
 +$mq-breakpoints:​ (
 +    mobile: 320px,
 +    tablet: 740px,
 +    desktop: 980px,
 +    wide: 1280px,
 +    ultrawide: 1400px,
 +    ​
 +    // Special cases:
 +    nav: 580px
 +);
 +</​code>​
 +
 +Das obige Beispiel kann mit [[https://​github.com/​sass-mq/​sass-mq|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.
 +
 +<code sass>
 +element {
 +    max-width: map-get($mq-breakpoints,​ wide);
 +}
 +</​code>​
css/scss/maps.txt · Zuletzt geändert: 2019/09/27 17:39 von admin