Question

在手写笔中，试图弄清楚为什么在循环中使用变量会忽略对背景的识别。作为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手写笔逃脱了字符

1 个答案: