html - Jade，Gulp，遍历数组以在样式标签中创建媒体查询

Question

TLDR；如何在 Jade 中的样式标签内创建循环？

我正在尝试遍历 Jade 中的一个 array 以在我的 html 中创建一组“媒体查询”。目标是只有一个样式标签来包装所有 media-queries。
该页面是一个模板，因此一些值将来自扩展该模板的页面。
**Gulp 在标题中只是为了彻底，但我认为它并没有真正解决我的问题或解决方案

所以想法是:
1.打开样式标签
2. -- 对于 [360,480,600,800,1024,2000] 中的每个尺寸
3. ---- 为该尺寸创建一个媒体查询
4. ------ 将该尺寸和客户名称应用于背景图像名称
4.关闭样式标签

Jade :

// sizes of images
- var sizes = [360,480,600,800,1024,2000]
// variable the is passed in via the page that extends the template. I defined it here just for example
- var cleanName = "client-name"

尝试一:
无法遍历数组，但应用客户端名称
您还会看到 Jade 循环调用被传递到 HTML 中

// loop one: fails. It gets the 'cleanName' but doesn't execute the loop
style.
    - for size in sizes                 
      @media (min-width:#{size}px){
        .hero {
            background-image: url("/public/img/case-study/#{cleanName}-intro-bg-#{size}.jpg");
        }
        .hero:before {
            background-image: url("/public/img/case-study/#{cleanName}-intro-fg-#{size}.png");
        }
    }

HTML 结果:

<style>
  - for size in sizes                   
  @media (min-width:px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-.png");
    }
  }
</style>

尝试二:
遍历数组，但它位于样式标签之外，因此我为循环中的每个元素设置了一个样式标签。

// loop two. This works, but it creates a new style tag for each item in `sizes`
for size in sizes
    style.
        @media (min-width:#{size}px){
            .hero {
                background-image: url("/public/img/case-study/#{cleanName}-intro-bg-#{size}.jpg");
            }
            .hero:before {
                background-image: url("/public/img/case-study/#{cleanName}-intro-fg-#{size}.png");
            }
        }

HTML 结果

<style>
  @media (min-width:360px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-360.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-360.png");
    }
  }

</style>
<style>
  @media (min-width:480px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-480.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-480.png");
    }
  }

</style>
<style>
  @media (min-width:600px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-600.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-600.png");
    }
  }

</style>
<style>
  @media (min-width:800px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-800.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-800.png");
    }
  }

</style>
<style>
  @media (min-width:1024px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-1024.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-1024.png");
    }
  }

</style>
<style>
  @media (min-width:2000px){
    .hero {
        background-image: url("/public/img/case-study/client-name-intro-bg-2000.jpg");
    }
    .hero:before {
        background-image: url("/public/img/case-study/client-name-intro-fg-2000.png");
    }
  }

</style>

我的下一次尝试将通过管道定义样式，但感觉我遗漏了一些明显的东西......

Answer 1

这行得通，但有点老套——它创建了 6 个样式标签，而不是在一个标签下创建所有样式。

- var sizes = [360,480,600,800,1024,2000]
- var cleanName = "client-name"
for size in sizes      
  style.
    @media (min-width:#{size}px){
      .hero {
          background-image: url("/public/img/case-study/#{cleanName}-intro-bg-#{size}.jpg");
      }
      .hero:before {
          background-image: url("/public/img/case-study/#{cleanName}-intro-fg-#{size}.png");
      }
    }