Dynamic MediaQueries for an image raster with Sass

Ich konnte MediaQueries dynamisch aus Zurb Foundations-Breakpoints für ein Raster mit folgendem Sass-Code genierieren:

$i: 2;
@each $s,
$breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        div.grid {
            .element {
                width: calc(100%/#{$i});
            }
        }
    }
    $i: $i+1;
}

In meinem Fall generiert es die Medienabfragen für alle Breakpoints, die für das Zurb Foundation Framework in den Sass-Array $breakpoints definiert sind. Für jeden Haltepunkt erhöht er die Anzahl der in einer Reihe des Gitters angezeigten Elemente, indem er seine Breite einstellt, beginnend mit zwei Elementen für die kleinste Bildschirmbreite. Natürlich muss für das .element die display -Eigenschaft auf inline-block gesetzt sein.

Loading Likes...

Tim Bernhard

Mein Name ist Tim Bernhard, geboren bin ich am 2. August 1996. Ich besuchte die Kantonsschule in Wiedikon und schloss diese im Frühling 2015 ab. Als Maturaarbeit habe ich meine Leidenschaft für Programmiertechnische Projekte mit Hoffnungen für die Zukunft verbunden und das Unternehmen Bernhard Webstudio gegründet.

Kommentar verfassen

This site uses Akismet to reduce spam. Learn how your comment data is processed.