Question

我正在学习SASS / SCSS，并且被困在生成一个色彩循环中，该色彩循环输出5种颜色类别以及最暗的类别。例如，我可以使用

class="color1 darkest"

最后。

这是我到目前为止所得到的。

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

    }
}
</pre>

此刻输出非常错误... 感谢您的提前帮助！

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

这就是你想要的吗？

SCSS颜色循环

1 个答案: