萨斯如何访问变量列表

Question

$red:"#111", "#222", "#333"; 
$orange: "#444", "#555","#666"; 
$green: "#777","#888","#999"; 

$color-collection: $red, $orange, $green; 

@each $color in $color-collection { 
    .color { 
     @for $i from 1 through length($color-collection) { 
     $c: nth($color-collection, $i); 
     .colours--#{$i} { 
      background: $c; 
      } 
     } 
    } 
} 

输出打印所有颜色，

.color .colours--1 { 
    background: "#111", "#222", "#333"; 
} 
.color .colours--2 { 
    background: "#444", "#555", "#666"; 
} 
.color .colours--3 { 
    background: "#777", "#888", "#999"; 
} 

我想打印为@each，所以如何访问$color-collection的$red？看起来不像这样$color-collection[$red]

我想打印像下面

.color .colours--1 { 
    background: "#111"; 
} 
.color .colours--2 { 
    background: "#222"; 
} 
.color .colours--3 { 
    background: "#333"; 
} 

等

Answer 1

你几乎在那里，我已经修改了你的代码稍微得到的结果你是后！

You can view the working demo here.

$red:"#111", "#222", "#333"; 
$orange: "#444", "#555","#666"; 
$green: "#777","#888","#999"; 

$color-collection: $red, $orange, $green; 

@each $color in $color-collection { 
    .color { 
    @for $i from 1 through length($color-collection) { 
     $c: nth($color, $i); 
     .colours--#{$i} { 
      background: $c; 
     } 
    } 
    } 
} 

虽然这回答你的问题，在它的当前设置每个循环覆盖以前的课，所以才意识到这一点......

Answer 2

这给一个镜头：

$red: "#111", "#222", "#333"; 
$orange: "#444", "#555", "#666"; 
$green: "#777", "#888", "#999"; 

$color-collection: join($red, $orange); 
$color-collection: join($color-collection, $green); 

@each $color in $color-collection { 
    .color { 
     @for $i from 1 through length($color-collection) { 
     $c: nth($color-collection, $i); 
     .colours--#{$i} { 
      background: $c; 
      } 
     } 
    } 
} 

这正是你想要的，然而它不会很好地扩展。

您需要将列表一起加入到一个列表中，而不是列表的列表中。

Answer 3

这会让你走上正确的道路。

我用什么做的，就是用maps和map-get财产，像这样：

@function color($collection, $key) { 
    @if map-has-key($collection, $key) { 
    @return map-get($collection, $key); 
    } 

    @warn "Unknown `#{$key}` in $collection."; 

    @return null; 
} 

$red: "#111", "#222", "#333"; 
$orange: "#444", "#555", "#666"; 
$green: "#777", "#888", "#999"; 

$colorcollection: (red: $red, orange: $orange, green: $green); 

.element { 
color: color($colorcollection, red); 
} 

你只需要重复这句话对每个元素的颜色，以达到你想要什么要得到。

您可以在此处看到运行示例： Sassmeister example