scss mixin linear-gradient, two variables made easy?

Question

I have a list of elements that need some gradient colors. But how can I make a simple mixin that simplifies the whole thing?

For example, in my css I'd like to be able to write:

button { @include linear(blue); }

and then scss would use my mixin and include my colors in my variables

$redTop: #F67777;
$redBottom: #E65050;

$blueTop: #77CFF6;
$blueBottom: #50B9E6;

@mixin linear($color) {
  background-image: linear-gradient($colorTop, $colorBottom);
}

Answer 1

For this, you'd want to split the colours into a map.

$red: (
  "top": #f00,
  "bottom": #c00
);

@mixin linear($color) {
  background-image: linear-gradient(map-get($color, "top"), map-get($color, "bottom"));
}

.red-bg {
  @include linear($red);
}