问题:
I'm trying to generate classes with Stylus {block} insertions while on an iteration with that code:
// Blocks
flexbox =
display flex
inline-flexbox =
display inline-...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I'm trying to generate classes with Stylus {block}
insertions while on an iteration with that code:
// Blocks
flexbox =
display flex
inline-flexbox =
display inline-flex
// Properties collection
props = {
'flexbox': 'flex',
'inline-flexbox': 'inline-flex'
}
// Generating classes
for kProp, vProp in props
.u-{vProp}
{kProp}
{kProp}
is supposed to output {flexbox}
and {inline-flexbox}
but I guess there's some kind of syntax conflict between calling a Stylus {block}
and calling the iteration variable.
So basically with this code, I got no output at all.
I also tried to escape the { }
but no luck.
Does anyone know a workaround?
回答1:
No proper solution but some workarounds I found:
- You can replace
{blocks}
by extending $placeholders
but be aware that with Stylus you can't extend inside a Media Query (it just ignore the MQ part)
- You can simply replace
{blocks}
by mixins()
(and it works inside Media Queries) which is the one I chose.
So basically now my code looks like this:
// Blocks
flexbox()
display flex
inline-flexbox()
display inline-flex
// Properties collection
props = {
'flexbox': 'flex',
'inline-flexbox': 'inline-flex'
}
// Generating classes
for kProp, vProp in props
.u-{vProp}
{kProp}()