Calling a Stylus {block} with a variable in an iteration

问题: 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}()
  • 发表于 2019-03-05 02:11
  • 阅读 ( 192 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除