通过 SCSS 循环携带变量

Question

我有以下 scss:

//############  colour vars
$pageA:#C70F3F;
$pageB:#7f153b;
$pageC:#0c5451;
$pageD:#9f1023;

//############ page type array
$pageTypes: pageA pageB pageC pageD;

//############  loop
@each $pageType in $pageTypes {
  $thisColor:str-insert(#{$pageType}, "$", 1);
  .#{$pageType} {
    background-color:$thisColor;
    background-image:url(../images/background/#{$pageType}.jpg);
  }
}

期望的结果是：

.pageA {
  background-color: #C70F3F;
  background-image: url(../images/background/pageA.jpg);
}

但我实际得到的是：

.pageA {
  background-color: $pageA;
  background-image: url(../images/background/pageA.jpg);
}

有没有办法把变量带入background-color？

Answer 1

添加颜色数组：

$pageA : #C70F3F;
$pageB : #7f153b;
$pageC : #0c5451;
$pageD : #9f1023;

//############ page type array + colors in array

$pageTypes: pageA pageB pageC pageD;
$colors : $pageA, $pageB, $pageC, $pageD;


//############  loop
$i:0;
@each $pageType in $pageTypes {
  $i:$i+1;
  $thisColor:nth($colors,$i);
  .#{$pageType} {
    background-color:$thisColor;
    background-image:url(../images/background/#{$pageType}.jpg);
  }
}

通过 SCSS 循环携带变量

Carry variable through a SCSS loop

css

sass