1

I have some html like this:

<code class="html">
      <div class="u-color-background-gray-100">
        <code>u-color-background-gray-100</code>
      </div>

      <div class="u-color-background-gray-300">
        <code>u-color-background-gray-300</code>
      </div>
</code>

I would like to render it using Gulp, gulp-nunjucks-render, and the array ['100', '300'].

ANSWER

This is the answer - but I'd like the give the credit to the person who helped me refine the question, pointed out the right components, and helped me with the syntax - so please officially answer it - and I will remove this inline answer - I have tested the below):

<code class="html">
   {% for item in ['100', '300'] %}
      <div class="u-color-background-gray-{{item}}>
        <code>u-color-background-gray-{{item}}</code>
      </div>
   {% endfor %}
</code>
Ole
  • 41,793
  • 59
  • 191
  • 359
  • With gulp, [gulp-nunjucks-render](https://www.npmjs.com/package/gulp-nunjucks-render) is one of my favorite. For document see [Nunjucks](https://mozilla.github.io/nunjucks/). – User 28 Jan 23 '17 at 03:32
  • I'm not sure I understand you correctly but it should be something like `class="u-color-background-gray-{{item}}"`. – User 28 Jan 23 '17 at 04:23

0 Answers0