我有以下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);
}
有没有办法将变量带入背景色?
答案 0 :(得分: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);
}
}