Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
— | css:scss:maps [2019/09/27 17:39] (aktuell) – angelegt admin | ||
---|---|---|---|
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 | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Das obige Beispiel kann mit [[https:// | ||
+ | |||
+ | ===== Einzelne Werte aus Sass Maps auslesen ===== | ||
+ | |||
+ | |||
+ | Mit '' | ||
+ | |||
+ | 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, | ||
+ | } | ||
+ | </ |