Question

是否可以使用scss / sass在嵌套变量中创建函数？我正在使用这篇文章来帮助指导我，但我没有找到任何关于它是否适用于嵌套颜色变量的内容。 Article working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function

我想创建一个自动创建这些变量的函数

$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");
}

codepen

我希望做这样的事情，但我无法弄清楚。

$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))

嵌套Scss @each变量

1 个答案: