Skip to content

Instantly share code, notes, and snippets.

@raahede
Created December 2, 2014 22:20
Show Gist options
  • Save raahede/a07a75591ee781b42287 to your computer and use it in GitHub Desktop.
Save raahede/a07a75591ee781b42287 to your computer and use it in GitHub Desktop.
Mixin with multiple arguments for use with media queries
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$breakpoints: 481px, 769px;
@mixin using($arg){
content:"#{$arg}";
}
@mixin multiple($args...){
// Avoid error if $breakpoints is undefined
$breakpoints: () !default;
@if( length($args) > 0 ){
// Output first value as default
@include using(nth($args, 1));
@if( length($args) > 1 and length($breakpoints) > 0 ){
// Loop through the rest of the arguments
// Ignore the first argument that we already used
@for $i from 1 through (length($args) - 1) {
// Check if there is a breakpoint available
// for the current argument iteration
@if( length($breakpoints) >= $i ) {
@media (min-width: #{nth($breakpoints, $i)}) {
$i: $i + 1; // Ignore first argument
@include using(nth($args, $i));
}
}
}
}
} @else {
@warn "You must provide at least one argument";
}
}
.a {
@include multiple(20px);
}
.b {
@include multiple(20px 1);
}
.c {
@include multiple(20px, 35px 1.1, 60px);
}
.d {
@include multiple;
}
.a {
content: "20px";
}
.b {
content: "20px 1";
}
.c {
content: "20px";
}
@media (min-width: 481px) {
.c {
content: "35px 1.1";
}
}
@media (min-width: 769px) {
.c {
content: "60px";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment