使用sass中list遍历子元素添加颜色

里有7个重复的

• ，这7个
• 需要应用7中不同颜色的 background-color ，需求很简单，如下是简易的效果图。
  
  HTML结构为：

  <div id="container">
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
      </ul>
  </div>

  利用list

  // 将背景颜色值定义成变量
  $red : #FF0000;
  $orange : #FFA500;
  $yellow : #FFFF00;
  $green : #008000;
  $bluegreen : #00FFFF;
  $blue : #0000FF;
  $purple : #800080;
  
  // @bgcolorlist储存背景颜色
  $bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
  
  // 使用SASS for循环语句为每一个li设置background-color
  @for $i from 1 to length($bgcolorlist)+1 {
      #container ul li:nth-child(#{$i}) {
          background-color: nth($bgcolorlist,$i);
      }
  }

  注意

  • from后面不能从0开始取，需要从1开始
  • to后面的值取不到，是从1到length($bgcolorlist)+1的开区间，即[1,length+1)如要循环7次，需要在后面+1.