SCSS Color Loop

Question

Я изучаю SASS / SCSS и застрял в создании цветовой петли, которая выводит 5 цветовых классов с добавлением классов, самых темных и светлых.Так, например, я могу использовать

class="color1 darkest"

в конце.

Это то, что я получил до сих пор.

<code><pre>
$color1: #F4858E!default;
$color1-darkest: darken( $color1, 20% )!default;
$color1-darker: darken( $color1, 10% )!default;
$color1-lighter: lighten( $color1, 10% )!default;
$color1-lightest: lighten( $color1, 20% )!default;

$color2: #BFE2CA!default;
$color2-darkest: darken( $color2, 20% )!default;
$color2-darker: darken( $color2, 10% )!default;
$color2-lighter: lighten( $color2, 10% )!default;
$color2-lightest: lighten( $color2, 20% )!default;

$color3: #A6DAEF!default;
$color3-darkest: darken( $color3, 20% )!default;
$color3-darker: darken( $color3, 10% )!default;
$color3-lighter: lighten( $color3, 10% )!default;
$color3-lightest: lighten( $color3, 20% )!default;

$color4: #FED88F!default;
$color4-darkest: darken( $color4, 20% )!default;
$color4-darker: darken( $color4, 10% )!default;
$color4-lighter: lighten( $color4, 10% )!default;
$color4-lightest: lighten( $color4, 20% )!default;

$color5: #D1B6F7!default;
$color5-darkest: darken( $color5, 20% )!default;
$color5-darker: darken( $color5, 10% )!default;
$color5-lighter: lighten( $color5, 10% )!default;
$color5-lightest: lighten( $color5, 20% )!default;


$colors: $color1, $color2, $color3, $color4, $color5;

@for $i from 1 through length($colors) {
    .color#{$i} {
        color: ($colors, $i);
        &.darkest {
            color: ($colors, $i)-darkest;
        }
        &.darker {
           color: ($colors, $i)-darker;
        }
        &.lighter {
           color: ($colors, $i)-lighter;
        }
        &.lightest {
           color: ($colors, $i)-lightest;
        }

    }
}

В данный момент вывод довольно неправильный ... Спасибо за вашу помощь заранее!

Answer 1

просто так

// scss
$color1: #F4858E;
$color2: #BFE2CA;
$color3: #A6DAEF;
$color4: #FED88F;
$color5: #D1B6F7;

$colors: $color1, $color2, $color3, $color4, $color5;

@for $i from 1 through length($colors) {
    .color#{$i} {
        color: nth($colors, $i);
        &.darkest {
          color: darken(nth($colors, $i), 20%);
        }
        &.darker {
          color: darken(nth($colors, $i), 10%);
        }
        &.lighter {
          color: lighten(nth($colors, $i), 10%);
        }
        &.lightest {
          color: lighten(nth($colors, $i), 20%);
        }
    }
}

дает мне вывод

//css
.color1 {
  color: #F4858E;
}
.color1.darkest {
  color: #ec2737;
}
.color1.darker {
  color: #f05663;
}
.color1.lighter {
  color: #f8b4b9;
}
.color1.lightest {
  color: #fce3e5;
}

.color2 {
  color: #BFE2CA;
}
.color2.darkest {
  color: #79c290;
}
.color2.darker {
  color: #9cd2ad;
}
.color2.lighter {
  color: #e2f2e7;
}
.color2.lightest {
  color: white;
}

.color3 {
  color: #A6DAEF;
}
.color3.darkest {
  color: #50b6df;
}
.color3.darker {
  color: #7bc8e7;
}
.color3.lighter {
  color: #d1ecf7;
}
.color3.lightest {
  color: #fcfeff;
}

.color4 {
  color: #FED88F;
}
.color4.darkest {
  color: #fdb52a;
}
.color4.darker {
  color: #fec65c;
}
.color4.lighter {
  color: #feeac2;
}
.color4.lightest {
  color: #fffbf4;
}

.color5 {
  color: #D1B6F7;
}
.color5.darkest {
  color: #975aed;
}
.color5.darker {
  color: #b488f2;
}
.color5.lighter {
  color: #eee4fc;
}
.color5.lightest {
  color: white;
}

это то, что вы хотите?