Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive SASS (SASS 3.2): Chain media queries and coordinate named breakpoints
// Created by Max Luster (@maxluster)
// Usage instructions at https://bugsnag.com/blog/responsive-typography-with-chained-media-queries
// Requires SASS 3.2, untested in older versions
// SASS 3.3 users should use: https://gist.github.com/maxluster/168e650267bac9faaafd
//Responsifies any single property across a range of named or numeric breakpoints
@mixin responsive($properties, $default-value, $value-breakpoint-lists...){
// Default set of named breakpoints. Override by setting this globally.
$named-breakpoints: "xxs" 310px, "xs" 550px, "s" 770px, "m" 1180px, "l" 1420px, "xl" 1860px, "xxl" 2200px !default;
// Apply default values
@each $property in $properties{
#{$property}: #{$default-value};
}
@each $value-breakpoint-list in $value-breakpoint-lists{
$value: nth($value-breakpoint-list, 1);
$breakpoint: nth($value-breakpoint-list, 2);
// If using a px based breakpoint
@if type-of($breakpoint) == number{
@media screen and (min-width: $breakpoint) {
@each $property in $properties{
#{$property}: #{$value};
}
}
}
// If using named breakpoint
@else{
$stringMatch: false;
@each $named-breakpoint in $named-breakpoints{
// If string match, apply property value pair at named breakpoint match
@if nth($named-breakpoint, 1) == $breakpoint{
$stringMatch: true;
@media screen and (min-width: nth($named-breakpoint, 2)) {
@each $property in $properties{
#{$property}: #{$value};
}
}
}
}
@if(stringMatch == false){
@warn "Couldn't find a named breakpoint: " + $breakpoint;
}
}
}
}
// Applies code at resolutions above a given breakpoint, based on a number or list of named breakpoints
@mixin named-breakpoint($breakpoint){
$named-breakpoints: "xxs" 310px, "xs" 550px, "s" 770px, "m" 1180px, "l" 1420px, "xl" 1860px, "xxl" 2200px !default;
@if type-of($breakpoint) == number {
@media only screen and (min-width: $breakpoint) { @content; }
}
@else{
$stringMatch: false;
@each $named-breakpoint in $named-breakpoints{
// If string match
@if nth($named-breakpoint, 1) == $breakpoint{
$stringMatch: true;
@media only screen and (min-width: nth($named-breakpoint, 2)) { @content; }
}
}
@if($stringMatch == false){
@warn "Couldn't find a named breakpoint: " + $breakpoint;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.