Zurb Foundation 4 SCSS Mixins in Verbindung für kleine und große(fluid/responsive) - Spalten

Bin ich, eine Firma aufzubauen responsive website und mit beiden SASS und Foundation 4 CSS-Framework für die erste Zeit. So weit So gut.
Aber ich habe da ein "problem" hier mit Mixins in Verbindung.
Wenn ich eine Spalte mit der Größe 6 in den großen Ansichten und Größe 3 kleine Ansichten, die ich verwenden kann, built-in CSS-Klassen

 class="large-6 small-3 columns"

Gibt es eine Möglichkeit, dies über eine Stiftung SASS-mixin? Den nur mixin für Spalten, die ich gefunden hier ist 

@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);

Und für das, was ich bekomme, kann ich nicht angeben, veiwports hier.

Irgendwelche Gedanken?
Vielen Dank im Voraus

InformationsquelleAutor Rui d'Orey | 2013-03-28
  1. 5

    Machte ich einige Mixins in Verbindung zu erleichtern, um damit umzugehen:
    https://gist.github.com/jofralogo/5324278 

    @mixin rgrid($phone-grid:"",$desktop-grid:""){
    @extend .small-#{$phone-grid};
    @extend .large-#{$desktop-grid};
    @extend .columns;
}

    Dieser mixin bietet eine einfache Möglichkeit, verwenden Sie die F4-grid-Klassen und media-queries.

    • $Telefon-raster: Anzahl der raster-Spalten.

    • $desktop-raster: Anzahl der raster-Spalten, überschreibt $Telefon-Gitter für Fenster der Breite 768px und oben.

    • Nur ein parameter deklariert werden könnte, um zu definieren, einen Wert für jede Fensterbreite.

    d.h.:

    @include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.
    • Ich Wünsche mir, dass die extend-Lösung war kugelsicher, aber es ist nicht. Stiftung verwendet Attribut-Selektoren, dass kann nicht erweitert werden, auf diese Weise. Hier ist ein Beispiel, warum es nicht funktioniert: cdpn.io/faHey
    • Ich mag deinen Ansatz, aber, da es Schnitte nach unten auf CSS-Vervielfältigung. Ich habe die Frage aufgeworfen, mit der Zurb-team. Wenn Sie sich Gedanken über die Semantik, chip deiner Meinung nach hier: github.com/zurb/foundation/issues/3049
    InformationsquelleAutor jofralogo
  2. 3

    Ich denke, dass man so durch @extend eine Stiftung, Klasse statt @include eine Stiftung mixin. So bekommen Sie alles, was, die Stiftung in Ihrer grid-Klassen, sowie die Fähigkeit zu stapeln.

    Ordnen Sie die gewünschten Klassen in der CSS: 

    .my-super-semantic-div {
    @extend .large-6, .small-3, .columns;
}

    Statt im HTML:

    <div class="large-6 small-3 columns">...<div>
    • Anscheinend kann man nicht. Die SCSS compiler sagt: nicht verlängern .klein-4 .Spalten: nicht verlängern verschachtelte Selektoren
    • Sie können es mit einem Komma zwischen den Klassen. @extend .large-6, .small-3, .columns;
    InformationsquelleAutor Jason Carlin
  3. 2

    Aber was ich wissen wollte war, ob Sie eine built-in SASS-mixin für diese. Aber ich werde überprüfen Sie Ihre @media-Einstellungen, und versuchen Sie umzusetzen, es selbst.

    NÖ, tun Sie nicht. 🙁 Siehe Dokumentation: http://foundation.zurb.com/docs/media-queries.html

    Aber Sie brauchen nicht zu erfinden, nichts! Verwenden Sie einfach die schöne reagieren-zu Kompass Erweiterung von Snugug.

    Zusätzlich zum aufrufen der Medien-Abfragen von Namen, wie beschrieben, in Reaktion auf die readme-Datei, können Sie Feuer, die Ihnen durch Ihre zahlen.

    Beispiel in der sauber eingerückt syntax:

    //Declaring the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

//Declaring a function to retrieve a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

//Calling a media query traditionally by a name
.bar
  +respond-to('s')
    @include grid-column(6)

//Calling a media query by its number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

    Yay!

    InformationsquelleAutor Andrey Mikhaylov - lolmaus
  4. 1

    Für diese Dinge, die Sie verwenden sollten, semantische Klassen.

    class="something-descriptive"

    und in Ihr sass auch verschiedene Mixins in Verbindung, für verschiedene Größen, so etwas wie dieses:

    .something-descriptive {
    @include grid-column(3)
}

@media screen and (min-width: 700px) {
    .something-descriptive {
        @include grid-column(6)
    }
}
    • Danke! Aber was ich wissen wollte war, ob Sie eine built-in SASS-mixin für diese. Aber ich werde überprüfen Sie Ihre @media-Einstellungen, und versuchen Sie es zu implementieren, mich.
    • Sie tun es und Sie tun das nicht: Sie haben nichts explizites wie @include small-grid-column(6), aber Sie bieten Variablen, so dass man schreiben könnte @media #{$small} { .something-descriptive { @include grid-colum(6) } } -- lese-Ende hier: foundation.zurb.com/docs/media-queries.html
    InformationsquelleAutor Tetaxa
  5. 1

    Mit der Sass-Mixins in Verbindung, verwenden Sie media queries, um explizit ändern Sie die grid. Die Art, wie ich näherte sich diesem zu tun ist eine Mobile-First-site ist, dann duplizieren Sie den Sass-code, definiert das raster in 2 media-Abfragen, etwa so:

    //Mobile Grid
@media only screen and (max-width: 768px) { ... }
//Desktop & Tablet Grid
@media #{$small} { ... }

    Konnte ich nicht finden keine klaren Beispiele, wie dies funktioniert. Von dem, was ich gesammelt, die Sie sollten in der Lage sein zu definieren, Gitter Sass und überschreiben Sie es mit nur die @media #{$small} {} Medien-Abfrage, jedoch in der Praxis konnte ich nicht zum laufen bekommen. Ich habe versucht mit dem media-query vor die anderen grid, etc, und was das Ergebnis war ist, dass das erste mal, wenn Sie das raster ist so, wie es bleibt.

    Ist hier ein mehr Beispiel. Im Fall der #dashboard es wird gestapelt und zentriert auf mobile und 3-Spalte auf desktop /tablet. Dies wäre class="small-10 small-centered large-4 columns" für die Verwendung von Präsentations-Klassen.

    //Mobile Grid
@media only screen and (max-width: 768px) {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(10, false, true); }
    & > #records { @include grid-column(10, false, true); }
    & > #results { @include grid-column(10, false, true); }
  }
}

//Desktop & Tablet Grid
@media #{$small} {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(4, false, false); }
    & > #records { @include grid-column(4, false, false); }
    & > #results { @include grid-column(4, false, false); }
  }
}

    HINWEIS: man könnte das erweitern auf diese und haben mehr Haltepunkte mit den Mixins in Verbindung, aber das scheint zu simulieren, die Standard-Zurb F4 Präsentations-Klasse Verhalten.

    InformationsquelleAutor JAMESSTONEco
Schreibe einen Kommentar