Skip to content

Instantly share code, notes, and snippets.

@graste
Created April 23, 2014 20:15
Show Gist options
  • Save graste/11230720 to your computer and use it in GitHub Desktop.
Save graste/11230720 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
// Breakpoint maps
// @key: name of breakpoint
// @value: map of settings for breakpoint
// -@key: type of media query
// -@value: value for current type
// ---
$breakpoints: (
'tiny': ( max-width: 767px ),
'small': ( min-width: 768px ),
'medium': ( min-width: 992px ),
'large': ( min-width: 1200px ),
'custom': ( min-height: 40em )
);
// Breakpoint handler
// 1. If breakpoint exists in map
// 2. Make good use of `inspect` function
// 3. If breakpoint doesn't exist in map
// 4. Warn user
// ---
// @param [string] $name: name of breakpoint to call
// ---
@mixin breakpoint($name) {
@if map-has-key($breakpoints, $name) { // 1
@media #{inspect(map-get($breakpoints, $name))} { // 2
@content;
}
}
@else { // 3
@warn "Couldn't find a breakpoint named `#{$name}`."; // 4
}
}
// Example
// ---
.element {
breakpoint: root;
@include breakpoint(tiny) {
breakpoint: tiny;
}
@include breakpoint(small) {
breakpoint: small;
}
@include breakpoint(medium) {
breakpoint: medium;
}
@include breakpoint(large) {
breakpoint: large;
}
@include breakpoint(custom) {
breakpoint: custom;
}
}
.element {
breakpoint: root;
}
@media (max-width: 767px) {
.element {
breakpoint: tiny;
}
}
@media (min-width: 768px) {
.element {
breakpoint: small;
}
}
@media (min-width: 992px) {
.element {
breakpoint: medium;
}
}
@media (min-width: 1200px) {
.element {
breakpoint: large;
}
}
@media (min-height: 40em) {
.element {
breakpoint: custom;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment