Css selectors css手写笔转义字符

在手写笔中，试图找出为什么循环中使用变量会使“背景”无法识别为css选择器：

 $primary = rgba(255,0,0,1)
 $primary-light = lighten($primary,15%)
 $primary-lighter = lighten($primary,40%)
 $primary-lightest = lighten($primary,65%)
 $primary-dark = darken($primary,15%)
 $primary-darker = darken($primary,40%)
 $primary-darkest = darken($primary,65%)

 for colors in primary
  for vars in light lighter lightest dark darker darkest
    .{colors} > .{vars}
      background {colors}-{vars} /* here why not triggering */
      &:after
        content \"@background\"

HTML

---

当前不能对变量名使用插值，但可以在此处使用bif：

$primary = rgba(255,0,0,1)
$primary-light = lighten($primary,15%)
$primary-lighter = lighten($primary,40%)
$primary-lightest = lighten($primary,65%)
$primary-dark = darken($primary,15%)
$primary-darker = darken($primary,40%)
$primary-darkest = darken($primary,65%)

for colors in primary
  for vars in 'light' 'lighter' 'lightest' 'dark' 'darker' 'darkest'
    .{colors} > .{vars}
      background lookup('$' + colors + '-' + vars) // just build variable name from other vars values (don't forget about $ sign)
      &:after
        content \"@background\"

另外，您可能应该为键使用字符串，否则light和dark将被视为它们已经定义的内置函数

我想你也可以看看，他们更适合这个任务

$primary = rgba(255,0,0,1)
$primary-light = lighten($primary,15%)
$primary-lighter = lighten($primary,40%)
$primary-lightest = lighten($primary,65%)
$primary-dark = darken($primary,15%)
$primary-darker = darken($primary,40%)
$primary-darkest = darken($primary,65%)

for colors in primary
  for vars in 'light' 'lighter' 'lightest' 'dark' 'darker' 'darkest'
    .{colors} > .{vars}
      background lookup('$' + colors + '-' + vars) // just build variable name from other vars values (don't forget about $ sign)
      &:after
        content \"@background\"