Как создать 3 оттенка цвета на цвет в Javascript? - PullRequest
Новая
       22

Как создать 3 оттенка цвета на цвет в Javascript?

0 голосов
/ 04 июля 2019

Я создал функцию sass, которая генерирует более светлые и темные версии основного цвета, например: 

$colors: (
  betpawa-green: #107A3D,
  lime-green: #8DC63F,
  yellow: #FBCD00,
);

@mixin color-generator {
  @each $name, $hex in $colors {
    &-#{$name} {
      background-color: $hex;
    }

    &-#{$name}:nth-child(4n+1) {
      background-color: lighten( $hex, 10% );
    }

    &-#{$name}:nth-child(4n+3) {
      background-color: darken( $hex, 10% );
    }
  }
}

.bg {
  @include color-generator;
}

Все работает, когда у меня есть мой HTML, например: 

<div class='box bg-betpawa-green'>1</div>
<div class='box bg-betpawa-green'>2</div>
<div class='box bg-betpawa-green'>3</div>

<br />

<div class='box bg-lime-green'>1</div>
<div class='box bg-lime-green'>2</div>
<div class='box bg-lime-green'>3</div>

<br />

<div class='box bg-yellow'>1</div>
<div class='box bg-yellow'>2</div>
<div class='box bg-yellow'>3</div>

Но я пытаюсь сгенерировать HTML из литералов шаблонов Javascript, и я немного застрял.

У меня есть постоянная цветов: 

  const colors = [
    'betpawa-green',
    'lime-green',
    'yellow',
  ]

Затем я перебираю этот массив и делаю еще один цикл внутри него, чтобы сгенерировать 3 деления на цвет, например: 

  const markup = `
    <ul>
        ${colors.map(color => `<li class='box bg-${color}'>Color</li>`)}
    </ul>
  `;

  // loop through the colours
  for (i = 0; i < colors.length; i++) { 

    // for each colour, generate 3 div elements
    for (j = 0; j < 3; j++) {
      console.log(j, 'j')
      document.body.innerHTML = markup;
    }

  }

Хотя это просто генерирует один div, а не 3. Как это исправить?

Ссылка на Codepen

Примечание: Если вы закомментируете Javascript, вы увидите желаемый результат.

1 Ответ

1 голос
/ 04 июля 2019

Вы хотите это правильно? 


(function() {

  const colors = [
    'betpawa-green',
    'lime-green',
    'yellow',
  ]

  // loop through the colours

  for (i = 0; i < colors.length; i++) {
    for(j = 0; j < 3; j++) {
      document.body.innerHTML += `<div class="box bg-${colors[i]}">${j}</div>`
    }
  }

})();
...