scss、sass 日常使用技巧

代码示例

1. 循环设置颜色

$icon-color: rgba(0, 249, 255, 1), rgba(74, 249, 59, 1), rgba(255, 197, 15, 1),
  rgba(240, 39, 147, 1), rgba(115, 19, 254, 1), rgba(24, 144, 255, 1);
//定义数组变量，数组元素用逗号隔开
.box{
  & > div {
      @each $c in $icon-color {
        $i: index($icon-color, $c);
        &:nth-child(#{$i}) {
          .value-name {
            display: flex;
            align-items: center;
            width: 100px;
            flex: 1;
            &::before {
              content: '';
              width: 6px;
              height: 6px;
              flex: 6px 0 0;
              border-radius: 50%;
              margin: 0 8px 0 0;
              background: nth($icon-color, $i);
            }
          }
        }
      }
    }
}

for 循环

@for $i from 1 through 3 {
  .item-#{$i} { 
      width: 2em * $i;
      background: url('~@/assets/images/messageManagement/tabs-icon-#{$i}.png') center center no-repeat;
   }
}