主页 / 问题 / 571995
Accepted
HelpaMnePlz
Asked:2020-09-30 06:40:31 +0000 UTC2020-09-30 06:40:31 +0000 UTC

手写笔如何实现循环？

  • 772

有一个带有类名和图标路径的对象。

currentProject = {'current-project': '../../sprites/123.png',
                  'composition-project': '../../sprites/123.png',
                  'room': '../../sprites/123.png',
                  'terms': '../../sprites/123.png',
                  'documents': '../../sprites/123.png',
                  'command': '../../sprites/123.png',
                  'contact': '../../sprites/123.png'}

如何得到结果：

&__current-project: 
   background-image: url('../../sprites/123.png')
&__room 
   background-image: url('../../sprites/123.png')

...

css

2 个回答

  1. 你不能在手写笔中使用对象，如果你自己填充对象，那么你可以创建两个数组和一个函数。

    该变量selectors是选择器/类的数组。
    该变量sprites是一个 url 精灵数组。
    可变arrLength- 数组的长度，数组必须相同，selectors并且sprites不要忘记计数从零开始。
    在循环中，我们调用函数，它返回数组和generate中每个元素的代码。 selectorssprites

    您可以通过将Stylus Compiler插入左侧字段来检查代码，按下“Compile stylus”按钮，css 将出现在右侧窗口中。

    手写笔代码

    selectors = current-project,
            composition-project,
            room,
            terms,
            documents,
            command,
            contact

sprites = '../../sprites/1.png',
          '../../sprites/2.png',
          '../../sprites/3.png',
          '../../sprites/4.png',
          '../../sprites/5.png',
          '../../sprites/6.png',
          '../../sprites/7.png'

arrLength = 6

generate(selector, sprite)
    &__{selector}
        background-image url(sprite)

.class
    for num in 0..arrLength
        generate(selectors[num], sprites[num])

    编笔

    .class__current-project {
    background-image: url("../../sprites/1.png");
}

.class__composition-project {
    background-image: url("../../sprites/2.png");
}

.class__room {
    background-image: url("../../sprites/3.png");
}

.class__terms {
    background-image: url("../../sprites/4.png");
}

.class__documents {
    background-image: url("../../sprites/5.png");
}

.class__command {
    background-image: url("../../sprites/6.png");
}

.class__contact {
    background-image: url("../../sprites/7.png");
}
    • 4
  2. Best Answer

    找到了越来越好的解决方案

    currentProject = {'current-project': '../../sprites/1.png',
              'composition-project': '../../sprites/2.png',
              'room': '../../sprites/3.png',
              'terms': '../../sprites/4.png',
              'documents': '../../sprites/5.png',
              'command': '../../sprites/6.png',
              'contact': '../../sprites/7.png'}

class                 
  for k, v in currentProject
    &__{k}
      background-image v
    • 0

相关问题