Skip to content

Instantly share code, notes, and snippets.

@maxluster
Last active February 4, 2019 21:24
Show Gist options
  • Save maxluster/168e650267bac9faaafd to your computer and use it in GitHub Desktop.
Save maxluster/168e650267bac9faaafd to your computer and use it in GitHub Desktop.
Responsive SASS: 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.3
// Enhanced by Breakpoint 2.4.x and Compass 1.0 (alpha)
// For SASS 3.2.x support, use https://gist.github.com/maxluster/c9ecc6e4a6770e507c2c
// Provides a simplified syntax for chaining media queries across named or numeric breakpoints
@mixin responsive($properties, $default-value, $responsive-values){
// No named breakpoints by default
$named-breakpoints: () !default;
// Apply default property values
@each $property in $properties{
#{$property}: #{$default-value};
}
@each $breakpoint, $value in $responsive-values{
// Get named breakpoint values
@if type-of($breakpoint) == string{
@if(map-has-key($named-breakpoints, $breakpoint)){
$breakpoint: map-get($named-breakpoints, $breakpoint);
}
@else{
@warn "Couldn't find named breakpoint: " + $breakpoint;
}
}
// Use Breakpoint if it exists
@if mixin-exists("breakpoint"){
// Apply at breakpoint
@include breakpoint($breakpoint) {
@each $property in $properties{
#{$property}: #{$value};
}
}
}
// Fallback to min-width media queries
@else{
@media screen and (min-width: $breakpoint) {
@each $property in $properties{
#{$property}: #{$value};
}
}
}
}
}
// Extras!
// Use $named-breakpoints with block-style media queries
@mixin named-breakpoint($breakpoint){
@if type-of($breakpoint) == string{
@if(map-has-key($named-breakpoints, $breakpoint)){
$breakpoint: map-get($named-breakpoints, $breakpoint);
@if mixin-exists("breakpoint"){
@include breakpoint($breakpoint){
@content;
}
}
@else{
@media screen and (min-width: $breakpoint) {
@content;
}
}
}
@else{
@warn "Couldn't find named breakpoint: " + $breakpoint;
}
}
}
// Create a scope for a local set of named breakpoints
@mixin with-named-breakpoints($context-breakpoints){
$old: $named-breakpoints;
$named-breakpoints: map-merge($named-breakpoints, $context-breakpoints) !global;
@content;
$named-breakpoints: $old !global;
}
Copy link

ghost commented Sep 19, 2014

Have someone got this to work with libsass? i'm getting:
[gulp-sass] source string:40: error: error reading values after 600px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment