Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:scss:maps
no way to compare when less than two revisions

Unterschiede

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
 +);
 +</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