es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Se puede tener un array dentro de un valor de un objeto de Sass?

01 Aug, 2023 Programación

Estoy tratando de tener un array dentro del valor de un objeto.

$background-things: (
    'a': ['100vh', 'transparent', 'column'],
    'higher': ['70vh', '#000', 'column'],
    'lower': ['30vh', '#fff', 'row'],
);

y luego llamarlos de esta manera:

@each $name, $value in $background-things {
    #background-#{$name} {
        @include column($height:$value[0], $background-color:$value[1], $flex-direction:$value[2]);
    }
}

Esto no funciona. ¿Hay alguna forma de hacer esto? Además, ¿funciona el valor $name, porque en la propiedad del objeto puse '&a'?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para tener un array dentro del valor de un objeto en Sass, puedes usar la misma sintaxis que en el ejemplo proporcionado:

    $background-things: (
  'a': ('100vh', 'transparent', 'column'),
  'higher': ('70vh', '#000', 'column'),
  'lower': ('30vh', '#fff', 'row')
);

    Para acceder a los valores, puedes usar el mismo bucle @each que en el ejemplo proporcionado:

    @each $name, $value in $background-things {
  #background-#{$name} {
    @include column($height: nth($value, 1), $background-color: nth($value, 2), $flex-direction: nth($value, 3));
  }
}

    En este caso, $name funciona como se espera, ya que &-#{$name} se interpola a &-a, &-higher y &-lower.

    Ten en cuenta que para acceder a los elementos del array necesitas usar la función nth, que toma el índice del elemento (empezando en 1).

Comments are closed.