6 comments

  • Mark Otto, over 5 years ago

    Well written and presented, but we do have many of these mixins and the Sass map in our source code with v4 :). You can loop over $grid-breakpoints and modify, add, or remove map values. You can use the breakpoint-up, breakpoint-down, breakpoint-between, breakpoint-next, etc to craft some crazy cool responsive CSS with our provided mixins.

    Check out the v4 source at https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid-framework.scss.

    2 points
    • Glenn McCombGlenn McComb, over 5 years ago

      Thanks Mark, wow those are awesome I hadn't dug right in to v4 - that is some very neat Sass. To be honest I generally include bootstrap.css on its own (compiled via a separate Sass build process). I did this previously because I found the v3 Sass build process took a fair while considering I rarely changed it.

      I haven't used v4 in production due to old browser support requirements (yes we have those kinds of clients) but I did find the grid to be highly awesome so I've used that in isolation in my personal projects.

      Cheers for the reply!

      0 points
  • Kevin YunKevin Yun, over 5 years ago

    This is a very good approach for SCSS media query mixins. Nice work! I’ll try this out on my next project

    1 point
  • Mattia AstorinoMattia Astorino, over 5 years ago

    What about just nesting media:

    .element { background-color: pink; @include mw(small) { background-color: red; } }
    0 points