1

Is there a way I can compress this down a bit more so all I have to add in this line is:

background: linear-gradient(left, $rainbow-colors);

Will I have to nest something here?

@mixin rainbow($colors...) {
  @each $color in $colors {
    .#{$color} {
      background: $color;
    } 
  }
}
$rainbow-red: red;
$rainbow-orange: orange;
$rainbow-yellow: yellow;
$rainbow-green: green;
$rainbow-blue: blue;

body {
  background: -webkit-linear-gradient(left, $rainbow-red, $rainbow-orange, $rainbow-yellow, $rainbow-green, $rainbow-blue);
}
mfluehr
  • 2,832
  • 2
  • 23
  • 31
cjones
  • 367
  • 1
  • 3
  • 19

1 Answers1

1

You don't have to specify each color as its own variable. A comma-separated list will suffice. (Also, your code should say to left, not just left.)

body {
  $rainbow-colors: red, orange, yellow, green, blue;
  background: linear-gradient(to left, $rainbow-colors);
}
mfluehr
  • 2,832
  • 2
  • 23
  • 31