index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass:Syntactiically Awesome Style Sheets</title>
  <link rel="stylesheet" href="css/demo1.css">
</head>
<body>
  <div class="test">
      <div class="color1"></div>
      <div class="color2"></div>
      <div class="color3"></div>
      <div class="color4"></div>
      <div class="color5"></div>
      <div class="color6"></div>
      <div class="color7"></div>
      <div class="color8"></div>
    </div> 
    <div style="clear:both;"></div>
    <div class="test2"></div> 
</body>
</html>

scss

$list: red orange yellow green grey blue purple black;

$len: length($list);

$width: percentage(1 / $len);
@for $i from 1 through $len{
  .test .color#{$i}{
    width: $width;
    background-color: nth($list, $i);
    height: 10px;
    float: left;
  }
}
.test{
  width: 100%;
}

.test2{
  height: 10px;
  width: 100%;
  background-image: linear-gradient(to right, red 0%, red $width, orange $width, orange $width * 2);//渐变，to right从左到右
}

css

.test .color1 {
  width: 12.5%;
  background-color: red;
  height: 10px;
  float: left;
}

.test .color2 {
  width: 12.5%;
  background-color: orange;
  height: 10px;
  float: left;
}

.test .color3 {
  width: 12.5%;
  background-color: yellow;
  height: 10px;
  float: left;
}

.test .color4 {
  width: 12.5%;
  background-color: green;
  height: 10px;
  float: left;
}

.test .color5 {
  width: 12.5%;
  background-color: grey;
  height: 10px;
  float: left;
}

.test .color6 {
  width: 12.5%;
  background-color: blue;
  height: 10px;
  float: left;
}

.test .color7 {
  width: 12.5%;
  background-color: purple;
  height: 10px;
  float: left;
}

.test .color8 {
  width: 12.5%;
  background-color: black;
  height: 10px;
  float: left;
}

.test {
  width: 100%;
}

.test2 {
  height: 10px;
  width: 100%;
  background-image: linear-gradient(to right, red 0%, red 12.5%, orange 12.5%, orange 25%);
}

/*# sourceMappingURL=demo1.css.map */