SASS-增加一个类并在列表中选择下一个变量 [英] SASS - Increment a class and choose the next variable in a list

问题描述

我正在尝试进行设置，将一个类从1递增到12，并基于变量列表(也包含12个变量)设置背景色.

I'm trying to get a setup going that will increment a class from 1 through 12 and set a background color based on a variable list (also of 12 variables).

我很亲密，但没有得到我希望的.这是我第一次尝试使用SASS中的控制指令，因此请原谅我的无知.

I am close, but not getting what I'd hoped. This is my first foray into control directives in SASS, so please forgive my ignorance.

当前，我正在成功增加班级.这是选择我遗漏的增量变量的一部分.

Currently, I'm getting the class incremented successfully. It's the part of choosing the incremented variable that I am missing out on.

@mixin colors {
        $colors: $orange, $blue, $lightBlue, $teal, $lightTeal, $green, $lightGreen, $darkOrange, $orange, $lightOrange, $yellow, $lightYellow;
        @each $color in $colors {
            background-color:#{$color};
        }       
    }

@for $i from 1 through 12 { 
    .block-#{$i} {
        span {
            @include colors;
        }
    }
}

这将输出如下内容:

.block-10 span {
    background-color: #faa21b;
    background-color: #005ca8;
    background-color: #0079c3;
    background-color: #0088a8;
    background-color: #009386;
    background-color: #00a05e;
    background-color: #589c45;
    background-color: #d4772b;
    background-color: #faa21b;
    background-color: #f7971f;
    background-color: #f9cc2a;
    background-color: #f6ee32;
}

理想情况下，我希望有一个背景色声明，而不是12.我想这可能是我想念的简单事情.任何见识将不胜感激！

Ideally, I'd like to have one background-color declaration, not 12. I think this might be something simple I'm missing, though. Any insight would be appreciated!

推荐答案

是这样的吗? (不确定为什么要使用混音):

Something like this? (not sure why you're using a mixin):

$orange: #faa21b;
$blue: #005ca8;
$lightBlue: #0079c3;
$teal: #0088a8;
$lightTeal: #009386;
$green: #00a05e;
$lightGreen: #589c45;
$darkOrange: #d4772b;
$orange: #faa21b;
$lightOrange: #f7971f;
$yellow: #f9cc2a;
$lightYellow: #f6ee32;
$i: 1;

@each $color in $orange, $blue, $lightBlue, $teal, $lightTeal, $green, $lightGreen, $darkOrange, $orange, $lightOrange, $yellow, $lightYellow {
    .block-#{$i} {
        span {
            background-color:#{$color};
        }
    }
    $i: $i + 1;
}

输出:

.block-1 span {
  background-color: #faa21b; }

.block-2 span {
  background-color: #005ca8; }

.block-3 span {
  background-color: #0079c3; }

.block-4 span {
  background-color: #0088a8; }

.block-5 span {
  background-color: #009386; }

.block-6 span {
  background-color: #00a05e; }

.block-7 span {
  background-color: #589c45; }

.block-8 span {
  background-color: #d4772b; }

.block-9 span {
  background-color: #faa21b; }

.block-10 span {
  background-color: #f7971f; }

.block-11 span {
  background-color: #f9cc2a; }

.block-12 span {
  background-color: #f6ee32; }

这篇关于SASS-增加一个类并在列表中选择下一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！