CSS [SASS] Nested @each Funktion möglich?

[zlep]

Hallo,

ist bei SASS eine nested @each Funktion möglich?

Momentan habe ich meine SASS so aufgebaut:

//Directions
$directions: (start, center, end);

@each $direction in $directions {
  .align-items-#{$direction} {
    align-items: #{$direction};
  }
  .align-items-sm-#{$direction} {
    align-items: #{$direction};
  }
  .align-items-md-#{$direction} {
    align-items: #{$direction};
  }
}

Ich würde aber gerne noch den Breakpoint (also "sm", md", ...) als Variable aufnehmen. Also im Prinzip so:

.align-items-#{$breakpoint}-#{$direction} {
align-items: #{$direction};
}

Dazu muss ich aber noch über $breakpoint loopen, allerdings weiß ich nicht, ob das mit SASS machbar ist.

Oder gibt es eventuell einen ganz anderen Lösungsansatz?

Vielen Dank

EDIT: Ok, habs schon

@each $breakpoint in $breakpoints {
  @each $direction in $directions {
    .align-items-#{$breakpoint}-#{$direction} {
      align-items: #{$direction};
    }
  }
}

 

[Yuuri]

https://stackoverflow.com/questions/25559725/sass-access-nested-multidimensional-list-on-each-loop

 

[zlep]

Ja, das hatte ich per Google schon selbst gefunden War aber nicht wirklich das, was mir weitergeholfen hätte.