Sha256: 777b90221a90df7883507ebca89e30c5400f847dc71be9733c25e40d90fce332
Contents?: true
Size: 1.67 KB
Versions: 6
Compression:
Stored size: 1.67 KB
Contents
// --------------------------------------
//
// #tools.mediaqueries
// http://www.sitepoint.com/managing-responsive-breakpoints-sass/
//
// --------------------------------------
$breakpoints: ("small": "(max-width: 520px)", "medium": "(min-width: 521px)", "large": "(min-width: 920px)", "xlarge": "(min-width: 1220px)", "large-shorter": "(min-width: 920px) and ( max-height: 600px)")
// ------------------------------------------------------------------
// @mixin media-query
// call and create all the breakpoints definine on the map $breakpoints
// ------------------------------------------------------------------
=media-query($name, $push: false)
// If the key exists in the map
@if map-has-key($breakpoints, $name)
// Prints a media query based on the value
@media #{map-get($breakpoints, $name)}
@content
@else if $push != false
// Add the new breakpoint to the map
$breakpoints: map-merge($breakpoints, ($name: $push)) !global
// And re-call the mixin normally
+media-query($name)
@content
@else
// Just warn the user
@warn "Unfortunately, no value could be retrieved from `#{$name}`. " + "Please make sure it is defined in `$breakpoints` map. " + "Or pass the media query as a second parameter to add it to the map."
// ------------------------------------------------------------------
// @mixin respond-to
// this mixin allow us to call several media-queries at once
//
// USAGE
// .searchform
// +respond-to(screen-xs, screen-sm)
// padding-left: 0
// ------------------------------------------------------------------
=respond-to($media...)
@each $mediatype in $media
+media-query($mediatype)
@content
Version data entries
6 entries across 6 versions & 2 rubygems