Skip to content

Instantly share code, notes, and snippets.

@jleiva
Created January 27, 2015 04:27
Show Gist options
  • Save jleiva/4fa73b2659b14dd9d3b0 to your computer and use it in GitHub Desktop.
Save jleiva/4fa73b2659b14dd9d3b0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----
// Breakpoints map
// @type Map
$breakpoints: (
// Regular breakpoints
"baby-bear": "(max-width: 500px)",
"mama-bear": "(max-width: 700px)",
"papa-bear": "(max-width: 800px)",
"super-bear": "(max-width: 1280px)",
// Reverso breakpoints
"reverso-baby-bear": "(min-width: 501px)",
"reverso-mama-bear": "(min-width: 701px)",
"reverso-papa-bear": "(min-width: 801px)",
"reverso-super-bear": "(min-width: 1281px)",
// Exclusive breakpoints
"exclusive-baby-bear": "(max-width: 500px)",
"exclusive-mama-bear": "(min-width: 501px) and (max-width: 800px)",
"exclusive-papa-bear": "(min-width: 801px) and (max-width: 1280px)",
// Extra breakpoints
"iOS": "(min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px)"
) !default;
// Enable/disable media queries
// @type Bool
$MQs: true !default;
// Output a media query named after `$point`.
// @param {String} $point
// @requires $breakpoints
// @requires $MQs
@mixin breakpoint($point) {
$query: map-get($breakpoints, $point);
@if not $query {
@warn "Oh shit! You are requesting an invalid breakpoint: `#{$point}`. :(";
}
@else if $MQs {
@media #{$query} {
@content;
}
}
}
test {
color: red;
@include breakpoint(baby-bear) {
color: blue;
}
@include breakpoint(iOS) {
color: purple;
}
}
test {
color: red;
}
@media (max-width: 500px) {
test {
color: blue;
}
}
@media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
test {
color: purple;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment