我试图做一些非常简单的事情而且似乎无法做到这一点,这让我发疯了。我想告诉我数字是否为偶数,并将变量加1。这就是我一直在尝试的:
@for $i from 1 through 6 {
$rgba-opacity:0.5;
&:nth-child(#{$i}) {
background: rgba($color-white-primary, $rgba-opacity);
}
@if #{$i} % 2 == 0 {
$rgba-opacity: $rgba-opacity+0.5;
}
}
基本上我要做的就是孩子一和二,得到一个颜色值,孩子三和四得到另一个,孩子五和六得到第三。有什么想法,为什么这不起作用?非常感谢您的帮助。
答案 0 :(得分:4)
在您的代码中(假设您已粘贴完整代码),您直接使用&:nth-child()
,这将导致错误Base-level rules cannot contain the parent-selector-referencing character '&'.
您需要为其指定父选择器。
$r : 100;
$g : 120;
$b : 140;
$rgba-opacity:0.5;
@for $i from 1 through 6 {
div {
&:nth-child(#{$i}) {
background: rgba($r, $g, $b, $rgba-opacity);
&:before {
content: ""+$i;
}
}
}
@if $i % 2 == 0 { //use $i for calculating mod here than #{$i}
$rgba-opacity: $rgba-opacity + 0.2;
$r: $r + 100;
$g: $g + 100;
}
}
HTML
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
输出: