css 手写笔转义字符
css stylus escaped characters
在手写笔中,试图弄清楚为什么在循环中使用变量会导致无法将 '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>
您目前不能对变量名使用插值,但您可以在此处使用 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,恕我直言,它们更适合这项任务。
在手写笔中,试图弄清楚为什么在循环中使用变量会导致无法将 '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>
您目前不能对变量名使用插值,但您可以在此处使用 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,恕我直言,它们更适合这项任务。