帶變量的嵌套Scss @each

Question

是否可以使用scss / sass在嵌套變量內創建函數？ 我使用這篇文章來幫助指導我，但是我沒有發現關於它是否可以在嵌套的顏色變量中使用的任何信息。 文章與列表和每個循環一起工作，並具有索引和第n個功能

我想創建一個函數來自動創建這些變量

$oranges:   #af5422;
$oranges2:  #FFCA28;
$oranges3:  #FFA000;

$fish: (
  orange: (
   "goldfish-1": $oranges,
   "goldfish-2": $oranges2,
   "goldfish-3": $oranges3,
  )
) !default;

h1 {
  color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
  color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
  color: map-get(map-get($fish, orange), "goldfish-3");
}

碼筆

我想做這樣的事情，但我不知道。

$oranges: #af5422 #FFCA28 #FFA000;

$fish: (
  orange: 
    @each $current-color in $oranges {
        $i: index($oranges, $current-color);
        "goldfish-#{$i}": $current-color,
    }
  )
) !default;

h1 {
  color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
  color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
  color: map-get(map-get($fish, orange), "goldfish-3");
}

Codepen 2

甚至可能還是有類似的方法來執行此操作？

Answer 1

我認為不可能在map內循環

但是，這是您可以輕松實現所需目標的方式。 我正在使用sass語法

$oranges: #af5422 #FFCA28 #FFA000
$orange: ()

@each $current-colour in $oranges
  $i: index($oranges, $current-colour)
  $orange: map-merge($orange, ("goldfish-#{$i}": $current-colour))

$fish: (orange: $orange) !default

h1
  color: map-get(map-get($fish, orange), "goldfish-1")

h2 
  color: map-get(map-get($fish, orange), "goldfish-2")

h3 
  color: map-get(map-get($fish, orange), "goldfish-3")

這是scss語法

$oranges: #af5422 #FFCA28 #FFA000;
$orange: ();

@each $current-colour in $oranges {
  $i: index($oranges, $current-colour);
  $orange: map-merge($orange, ("goldfish-#{$i}": $current-colour));
}

$fish: (orange: $orange) !default;

h1 {
  color: map-get(map-get($fish, orange), "goldfish-1");
}

h2 {
  color: map-get(map-get($fish, orange), "goldfish-2");
}

h3 {
  color: map-get(map-get($fish, orange), "goldfish-3");
}

它們都編譯為以下CSS

h1 {
  color: #af5422; }

h2 {
  color: #FFCA28; }

h3 {
  color: #FFA000; }

更新的擴展答案

基於您想要在注釋鏈接中實現的目標這是使用sass縮進樣式的代碼

$oranges: #af5422 #FFCA28 #FFA000
$newvar: car plane truck

$shaded: 5% 15%
$orange: ()
$vehicle: ()

@each $current-colour in $oranges
  $i: index($oranges, $current-colour)
  $orange: map-merge($orange, ($i*100:$current-colour))

$fish: ( orange: $orange) !default

@each $automobile in $newvar
  $i: index($newvar, $automobile)
  @for $count from 1 through 5
    $new_map: ()
    @if $count == 1
      $new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 2))))
    @else if $count == 2
      $new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 1))))
    @else if $count == 3
      $new_map: map-merge($new_map, ($count *100: nth($oranges, $i)))
    @else
      $new_map: map-merge($new_map, ($count *100: darken(nth($oranges, $i), nth($shaded, 1))))
    $vehicle: map-merge($vehicle, $new-map)
  $fish: map-merge($fish, ($automobile: $vehicle))