@each l oop внутри аргумента @include - PullRequest
Новая
       5

@each l oop внутри аргумента @include

0 голосов
/ 04 февраля 2020

Я пытаюсь l oop внутри al oop, чтобы скрестить все цвета и их селектор в списке с каждым другим цветом и селектором в том же списке.

В настоящее время все выглядит нравится. Но для этого нужно вручную добавить каждую вариацию, а не то, что я хочу. 

$rgbaList: "trn" transparent, "lt" rgba($lt, 0.9999), "dk" rgba($dk, 0.9999),
  "lt-grey" rgba($lt-grey, 0.9999), "p1" rgba($p1, 0.9999),
  "p2" rgba($p2, 0.9999), "p3" rgba($p3, 0.9999), "s1" rgba($s1, 0.9999),
  "s2" rgba($s2, 0.9999), "s3" rgba($s3, 0.9999), "s4" rgba($s4, 0.9999);

%curve {
  content: "";
  position: absolute;
  height: 4vw;
  bottom: -2vw;
  left: 0;
  z-index: 101;
  width: 100%;
}
@mixin curve($c1, $c2) {
  &::after {
    @extend %curve;
    background-image: url("data:image/svg+xml,%3Csvg width='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 10' preserveAspectRatio='none' style='width:100%;' xml:space='preserve'%3E%3Cpath fill='#{$c1}' d='M0,0v10c0,0,81.6-5,200-5s200,5,200,5V0H0z'/%3E%3Cpath fill='#{$c2}' d='M0,10c0,0,81.6-5,200-5s200,5,200,5H0z'/%3E%3C/svg%3E%0A");
  }
}
@each $i in $rgbaList {
//Dont want to have to manually add each variant inside 
//this @each (tried using @each within @each - shown below). 
  .curve-#{nth($i, 1)}-trn {
    @include curve(#{nth($i, 2)}, transparent);
  }
  .curve-#{nth($i, 1)}-lt {
    @include curve(#{nth($i, 2)}, rgba($lt, 0.9999));
  }
  .curve-#{nth($i, 1)}-dk {
    @include curve(#{nth($i, 2)}, rgba($dk, 0.9999));
  }
  .curve-#{nth($i, 1)}-lt-grey {
    @include curve(#{nth($i, 2)}, rgba($lt-grey, 0.9999));
  }
// and so on

Я попытался сделать что-то подобное, используя @each вместо селектора и аргумента, но @each используемый таким образом не работает: 

@each $i in $rgbaList {
  .curve-#{nth($i, 1)}-/*each > $i1 here*/ {
    @extend .curve;
    @include curve(#{nth($i, 2)}, /*each > $i2 here*/);
  }
}

Как еще я могу подойти к этому?

Ожидаемый результат, когда наполовину вручную (если бы это было что-то) закодировано мной, как на начало, выглядит следующим образом: 

.curve-trn-trn::after,
.curve-trn-lt::after,
.curve-trn-dk::after,
.curve-trn-lt-grey::after,
.curve-trn-p1::after,
.curve-trn-p2::after,
.curve-trn-p3::after,
.curve-trn-s1::after,
.curve-trn-s2::after,
.curve-trn-s3::after,
.curve-trn-s4::after,
.curve-lt-trn::after,
.curve-lt-lt::after,
.curve-lt-dk::after,
.curve-lt-lt-grey::after,
.curve-lt-p1::after,
.curve-lt-p2::after,
.curve-lt-p3::after,
.curve-lt-s1::after,
.curve-lt-s2::after,
.curve-lt-s3::after,
.curve-lt-s4::after,
.curve-dk-trn::after,
.curve-dk-lt::after,
.curve-dk-dk::after,
.curve-dk-lt-grey::after,
.curve-dk-p1::after,
.curve-dk-p2::after,
.curve-dk-p3::after,
.curve-dk-s1::after,
.curve-dk-s2::after,
.curve-dk-s3::after,
.curve-dk-s4::after,
.curve-lt-grey-trn::after,
.curve-lt-grey-lt::after,
.curve-lt-grey-dk::after,
.curve-lt-grey-lt-grey::after,
.curve-lt-grey-p1::after,
.curve-lt-grey-p2::after,
.curve-lt-grey-p3::after,
.curve-lt-grey-s1::after,
.curve-lt-grey-s2::after,
.curve-lt-grey-s3::after,
.curve-lt-grey-s4::after,
//AND SO ON
{
  content: "";
  position: absolute;
  height: 4vw;
  bottom: -2vw;
  left: 0;
  z-index: 101;
  width: 100%;
}
.curve-trn-trn::after {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 10' preserveAspectRatio='none' style='width:100%;' xml:space='preserve'%3E%3Cpath fill='rgba(0,0,0,0)' d='M0,0v10c0,0,81.6-5,200-5s200,5,200,5V0H0z'/%3E%3Cpath fill='rgba(0,0,0,0)' d='M0,10c0,0,81.6-5,200-5s200,5,200,5H0z'/%3E%3C/svg%3E%0A");
}
.curve-trn-lt::after {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 10' preserveAspectRatio='none' style='width:100%;' xml:space='preserve'%3E%3Cpath fill='rgba(0,0,0,0)' d='M0,0v10c0,0,81.6-5,200-5s200,5,200,5V0H0z'/%3E%3Cpath fill='rgba(247,247,247,0.9999)' d='M0,10c0,0,81.6-5,200-5s200,5,200,5H0z'/%3E%3C/svg%3E%0A");
}
.curve-trn-dk::after {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 10' preserveAspectRatio='none' style='width:100%;' xml:space='preserve'%3E%3Cpath fill='rgba(0,0,0,0)' d='M0,0v10c0,0,81.6-5,200-5s200,5,200,5V0H0z'/%3E%3Cpath fill='rgba(42,42,42,0.9999)' d='M0,10c0,0,81.6-5,200-5s200,5,200,5H0z'/%3E%3C/svg%3E%0A");
}
.curve-trn-lt-grey::after {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 10' preserveAspectRatio='none' style='width:100%;' xml:space='preserve'%3E%3Cpath fill='rgba(0,0,0,0)' d='M0,0v10c0,0,81.6-5,200-5s200,5,200,5V0H0z'/%3E%3Cpath fill='rgba(235,235,236,0.9999)' d='M0,10c0,0,81.6-5,200-5s200,5,200,5H0z'/%3E%3C/svg%3E%0A");
}
//AND SO ON

1 Ответ

0 голосов
/ 04 февраля 2020

Вам нужно добавить переменные цвета, которые вы хотите повторить, в другой список, а затем l oop поверх этого списка внутри вашего исходного l oop. Я предоставил песочницу Сассмейстера, иллюстрирующую, что я имею в виду. 

$colours: $lt, $dk, $lt-grey; //... and so on

@each $i in $rgbaList {
  .curve-#{nth($i, 1)} {
    @extend %curve;
    @each $colour in $colours {
      @include curve(#{$colour}, #{nth($i, 2)});
    }
  }
}

Вот пример песочницы Сассмайстера. https://www.sassmeister.com/gist/20ed2ad09e29b7fb1ddff8b87ff3c8ba

...