Skip to content

Instantly share code, notes, and snippets.

@simonj
Created April 24, 2015 09:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simonj/f17f3a0d8a31e372b3e8 to your computer and use it in GitHub Desktop.
Save simonj/f17f3a0d8a31e372b3e8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
/**
* This file is a helper to easy make media queries.
*
* How to use:
* @include respond-to(small) { ... }
* @include respond-to(medium) { ... }
* @include respond-to(large) { ... }
**/
$breakpoints: (
'small' : (min-width: 768px),
'medium' : (min-width: 992px),
'large' : (min-width: 1200px),
'complex-extra-small' : (min-width: 0) and (max-width: 992px),
// 'complex-small' : 'min-width: 768px and max-width: 992px',
// 'complex-medium' : 'min-width: 992px and max-width: 1200px',
);
@mixin respond-to($breakpoint) {
// Retrieves the value from the key
$value: map-get($breakpoints, $breakpoint);
// If the key exists in the map
@if $value != null {
// Prints a media query based on the value
@media ($value) {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map. see sass/helper/breakpoints.scss file";
}
}
@include respond-to(complex-extra-small) {
background:green;
}
(max-width: 992px) isn't a valid CSS value.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment