@each

코드를 여러줄 작성할 필요 없이 변수값을 받아서 스타일을 꾸밀 수 있다.

엄청 간단하고만요😀

 

 

@each

<div class="font-13px">
	ABCDEFG
</div>
<div class="font-20px">
	ABCDEFG
</div>
<div class="font-50px">
	ABCDEFG
</div>


$sizes: 13px, 20px, 50px;

@each $size in $sizes {
    .font-#{$size} {
      font-size: $size;
    }
}

 

변수값과 클래스명의 일부를 같게 지정해줘야해서 보기에 좋지 않다고 생각했는데...

key,value를 이용해서 사용하는 방법이 있다! 두두둥😗 그것은 아래의 map활용을 봅시다

 

 

 

map을 활용한 @each

이전 예제의 코드를 이런식으로 변경 가능!

<div class="font-13">
	ABCDEFG
</div>
<div class="font-20">
	ABCDEFG
</div>
<div class="font-50">
	ABCDEFG
</div>



$sizes: (13:13px, 20:20px, 50:50px);

@each $key, $size in $sizes {
  .font-#{$key} {
    font-size: $size;
  }
}

 

 

 

 

Destructuring

 

동일한 css 프로퍼티를 받아올 경우 사용하기에 아주 좋겠습니다

값만 대입해주니 소스가 매우 간략해지는군요😀

<div class="box-1">ABCDEFG</div>
<div class="box-2">ABCDEFG</div>
<div class="box-3">ABCDEFG</div>


$boxes: 1 #000 #fff 100px,
    2 #808080 #111 200px,
    3 red #fff 300px;
    
@each $name, $boxColor, $textcolor, $height in $boxes {
    .box-#{$name} {
        background-color: $boxColor;
        width: 300px;
        float: left;
        color: $textcolor;
        height: $height;
    }
}

 

 

 

오늘의 sass 공부 마무으리