Geek asks and answers

Zurb Foundation 4 SCSS mixins for small and large (liquid / sensitive) columns

I am creating a website to respond to companies and for the first time using both SASS and Foundation 4 CSS Framework. So far, so good. However, I have a problem with mixins. If I need a column of size 6 in large views and size 3 in small views, I can use the built-in CSS classes

 class="large-6 small-3 columns"

Is there a way to do this using Foundation SASS mixing? The only mixin for the columns I found here is

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

And for what I get, I cannot specify veiwports here.

Any thoughts? Thank you in advance

+5
source share
5 answers

, : https://gist.github.com/jofralogo/5324278

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

mixin F4 -.

  • $phone-grid: .

  • $desktop-grid: , $phone- 768px .

  • .

:.

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.
+5

, @extend Foundation @include Foundation mixin. , Foundation , .

, CSS:

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

HTML:

<div class="large-6 small-3 columns">...<div>
+3

, SASS mixin . @media .

, .:( . : http://foundation.zurb.com/docs/media-queries.html

! respond-to Snugug.

- , readme, .

:

// 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!

+2

.

class="something-descriptive"

sass , - :

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

@media screen and (min-width: 700px) {
    .something-descriptive {
        @include grid-column(6)
    }
}
+1

Sass Mixins - . , , - Mobile First, Sass, -, :

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

, . , , Sass, - @media #{$small} {}, . - , .., , , , , , .

Here is a longer example. In the case, #dashboardit is folded and centered on the mobile and 3 columns on the desktop / tablet. This will be class="small-10 small-centered large-4 columns"for using presentation classes.

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

NOTE. You can extend this and have more breakpoints using mixins, but this seems to mimic the behavior of the default presentation class Zurb F4.

+1
source

More articles:


All Articles