Html Jade、Gulp、循环数组以创建样式标签中的媒体查询

TLDR；如何在

Jade

中的样式标记内创建循环

我试图在

Jade

中循环通过

数组

，在html中创建一组“媒体查询”。目标是只使用一个样式标记来包装所有

媒体查询


页面是一个模板，因此一些值将来自扩展模板的页面。

**标题中的“吞咽”只是为了彻底，但我认为它并没有真正影响到我的问题或解决方案

所以这个想法是：

1.打开样式标签

2. -- 对于[360480600010242000]中的每种尺寸

3. ---- 为该大小创建媒体查询

4. ------ 将该大小和客户端名称应用于背景图像名称

4.关闭样式标记

杰德：

尝试一个：

无法在数组中循环，但应用客户端名称

您还可以看到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>

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>


@介质（最小宽度：360px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-360.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-360.png”）；
}
}
@介质（最小宽度：480px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-480.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-480.png”）；
}
}
@介质（最小宽度：600px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-600.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-600.png”）；
}
}
@介质（最小宽度：800px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-800.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-800.png”）；
}
}
@介质（最小宽度：1024px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-1024.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-1024.png”）；
}
}
@介质（最小宽度：2000px）{
.英雄{
背景图片：url（“/public/img/case-study/client-name-intro-bg-2000.jpg”）；
}
英雄：以前{
背景图片：url（“/public/img/case-study/client-name-intro-fg-2000.png”）；
}
}

我的下一次尝试将是对样式定义进行细化，但感觉我缺少了一些明显的东西…
这是可行的，但有点粗糙-它创建了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");
      }
    }

不幸的是，目前无法提供帮助，但我建议为每个
循环提供任何帮助。也很高兴看到有人在使用jade。
每个
都给我带来了相同的结果。jade只支持样式标记的纯文本内容。有关更多和一些解决方法和解决方案，请参阅。您可能还可以使用导入CSS预处理器文件（如Stylus、Sass等）。这与问题中的示例二相同，不是吗？您最好尝试使用预处理器，如Stylus、SCSS或LESSIt也是一样的，但这似乎是使用Jade完成此操作的唯一方法，至少目前是这样。
<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>

- 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");
      }
    }