SCSS: Assigning two values to a variable

Question

I am using this mixin to generate media queries. The mixin works by inserting two values (a min width and an optional max width):

@include respond-to(300px,500px) {
  .this-is-not-in-ie-either { color: green; }
} 

The trouble is that max/min width values are difficult to remember. I would much rather insert a key word variable.

Eg

$mob: 0, 480px;
$tab: 480px, 940px;

However, SCSS misunderstands this as the min width being "0, 480px" and the max-width being "undefined".

Is it possible to have a variable which holds two values.

I know I could use two key words (eg $mob-min, $mob-max), but I would rather just use one.

Answer 1

When you write this:

$mob: 0, 480px;
@include respond-to($mob) {
  .this-is-not-in-ie-either { color: green; }
}

What you're actually doing is passing the list as the first argument to the mixin:

@include respond-to($mixins-first-arg: (300px,500px)) {
  .this-is-not-in-ie-either { color: green; }
}

What you need to write is this:

@include respond-to($mob...) {
  .this-is-not-in-ie-either { color: green; }
}