SCSS中的for循环使用

# 「css技巧」css中使用循环

$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;
        }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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


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

1
2
3

← 「css技巧」使用hover和attr()定制悬浮提示 CSS-function汇总→