create stack of blocks with the number of blocks as the size of an array

Asked Sep 08 '20 at 16:40

Active Sep 08 '20 at 17:03

Viewed 57 times

I need to have some stack of divs that are on top of each other. The number of blocks is defined by the length of a given array that is in my component,which is dynamic. For example if the array is sized 2 the result will be:

If the size of the array is 3 the result will be

I understand that I need to loop through the number of blocks I want and transform: translate(-50% *(i), -50% * i) where i is the index of the for that starts with 1. how I can achive this using scss/ css only ? How do I pass the variable in order to loop through it? Or there is another way that can be done ?

In my component I have an array , it can change it's size. The number of blocks has to be as the size of this array. Thanks

edited Sep 08 '20 at 17:03

asked Sep 08 '20 at 16:40

MD10

1,313
3
12
35

You really can't without knowing how many elements there are. – Paulie_D Sep 08 '20 at 16:58
1

In my component I have an array of elements , the stack has to be sized as the length of this array. – MD10 Sep 08 '20 at 17:03
1

@Paulie_D check again I have edited the post – MD10 Sep 08 '20 at 17:06
https://sass-lang.com/documentation/at-rules/control/for – Chunky Chunk Sep 08 '20 at 18:14
1

You better use negative margin... – G-Cyrillus Sep 08 '20 at 18:32
related: https://stackoverflow.com/a/63764705/8620333 – Temani Afif Sep 08 '20 at 19:28
1

can someone create a stackblitz with an example ? – MD10 Sep 08 '20 at 19:42
1

not a blitz but a pen : https://codepen.io/gc-nomade/pen/RwaQyyq to demonstrate idea & loop – G-Cyrillus Sep 08 '20 at 20:59
thanks, I have managed to solve it witout sass loops – MD10 Sep 09 '20 at 16:11

create stack of blocks with the number of blocks as the size of an array

0 Answers0