SCSS
$colors: (
(#ee5568, #d63c5d),
(#ee245a, #de1d39),
(#f3744b, #f15e2e),
(#fec34e, #f7a01f),
(#c1b631, #a2a337),
(#00ab95, #118d79),
(#41c0bf, #00b1b4),
(#4e85a0, #496982),
(#9a2989, #81236a),
(#c13b8d, #a72060),
(#ee5568, #d63c5d),
);
$fill: #fbe7b9;
$gradient-size: 60px;
// or (window height / number of colors) dependent
.playground {
width: 100%;
height: (length($colors)-1)*$gradient-size;
margin: auto;
$gradient: ();
@for $i from 1 through length($colors)-1 {
$item: nth($colors, $i);
$lighter: nth($item, 1);
$darker: nth($item, 2);
$gradient: append($gradient, linear-gradient(135deg, $darker 24.9%, transparent 25.1%) -.5*$gradient-size #{($i - 1)*$gradient-size}, comma);
$gradient: append($gradient, linear-gradient(225deg, $lighter 24.9%, transparent 25.1%) -.5*$gradient-size #{($i - 1)*$gradient-size}, comma);
$item: nth($colors, $i + 1);
$lighter: nth($item, 1);
$darker: nth($item, 2);
$gradient: append($gradient, linear-gradient(315deg, $darker 24.9%, transparent 25.1%) 0 #{($i - 1)*$gradient-size}, comma);
$gradient: append($gradient, linear-gradient(45deg, $lighter 24.9%, transparent 25.1%) 0 #{($i - 1)*$gradient-size}, comma);
}
background: $gradient;
background-color: $fill;
background-repeat: repeat-x;
background-size: $gradient-size $gradient-size;
}
html, body {
display: flex;
height: 100%;
width: 100%;
}
