css 手写笔转义字符

Question

在手写笔中，试图弄清楚为什么在循环中使用变量会导致无法将 'background' 识别为 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

 <body>
       <div class="primary">
         <div class="lightest"></div>
         <div class="lighter"></div>
         <div class="light"></div>
         <div class="dark"></div>
         <div class="darker"></div>
         <div class="darkest"></div>
       </div>
 </body>

Answer 1

您目前不能对变量名使用插值，但您可以在此处使用 lookup 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 将被视为内置函数（它们已经定义）。

我想你也可以看看 hashes，恕我直言，它们更适合这项任务。

css 手写笔转义字符

css stylus escaped characters

css-selectors

stylus