본문 바로가기

css

[scss]each 두번 쓰기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$justify-arr:(
  start :flex-start,
  center :center,
  end :flex-end,
  between :space-between,
  around :space-around,
  evenly :space-evenly,
);
$align-arr:(
  start :flex-start,
  center :center,
  end :flex-end,
);
 
.flex{
 @each $justifyKey,$justifyValue in $justify-arr{
   @each $alignKey,$alignValue in $align-arr{
     &-#{$justifyKey}-#{$alignKey}{
       justify-content: #{$justifyValue}; align-items: #{$alignValue}
     }
   }
 };
};
cs

 


top