scss循环的应用

$free-color: #6089c7, #cf0f38, #ff603b, #0391fe, #da1b1f, #34cc95, #16c6ec, #16c6ec, #ee5c1c,
  #ffacb0, #007aff;

@for $i from 1 through length($free-color) {
  $item: nth($free-color, $i);
  .freeClinic-#{$i} {
    .welcome {
      .title {
        &::before {
          border-top: 4px solid $item;
        }
        &::after {
          border-top: 4px solid $item;
        }
      }
    }
  }
}

length() 是用来获取数组的长度
这个样式是做项目的时候用到的 根据不用的类别 显示不用的字体颜色
@for scss的for循环
数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：nth 函数可以直接访问数组中的某一项；
如果$free-color的属性不止字符串 而是一个对象 例如：

$free-color: ((color:#6089c7));

那么在给border-top赋值的时候可以为

border-top:map-get($item,color)
//map-get函数用于查找键值，