SCSS 如何实现动态变量

1,956 阅读1分钟

当定义多个变量,又要依次循环传入这些变量的时候,可以通过map-get 和 #{} 来操作,代码如下

$macau-map: (
  risk1: #fcc457,
  risk2: #fdaa26,
  risk3: #e38400,
  risk4: #ce6c12,
  risk5: #a75900
);

@for $i from 1 through 7 {
    .macau.risk-#{$i}.active {
      background-color: map-get($macau-map, risk#{$i});
    }
    .mpf-orso.risk-#{$i}.active {
      background-color: map-get($orso-mcf-map, risk#{$i});
    }

    .risk-#{$i} {
      span {
        display: none;
      }
    }

    .risk-#{$i}.active {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: center;

    }
 }