[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 49회차 미션

패스트캠프 프론트엔드 인강 49일차 지난시간에 이어 Sass(SCSS)의 @each와 list, map그리고 map-keys(), map-values()를 배워보았다.

@each

@each는 List와 Map데이터를 반복할 때 사용한다.
for in 문과 유사하다

@each $변수 in 데이터{ 
	//반복사용 
} 

List는 자바스크립트 배열, Map은 자바스크립트 객체와 유사함

//List Data
$fruits:(apple, orange, banana, mango);

.fruits{
	@each $fruit in $fruits{
		li.#{$fruit}{
			background:url("/image/#{$fruit}.png"
		}
	}
}

$fruits:apple, orange, banana, mango;

.fruits{
	@each $fruit in $fruits{
		$index:index($fruits, $fruit);//index내장함수
		li:nth-child(#{$index}){
			left:50px * $index
		}
	}
}

index내장함수를 살펴보자면

전체데이터인 $fruits중에서 $fruit는 몇번째 매개변수인지를 표시해준다.1,2,3,4

그리고 변수를 직접적으로써줄수없으므로 문자보간해준다 #{}

$fruits-data: (
	apple:korea,
	orange:china,
	banana:japan
);
@each $fruit, $country in $fruits-data{
	.box-#{$fruit}{
		background:url("/images/#{$country}.png")
	}
}

fruits-data는 map으로 key:value형태이다.

@each에서 key, value대신 $fruit, $country로 가져온다.

map을 숫자로뽑아내기위해서는 리스트형태로 바꿔야한다. 이때 sass내장함수인 may-keys(), map-values()를 이용한다.

fruit 맵을 리스트로 map-keys($fruits-data) => (apple,orange,banana)
country 맵을 리스트로 map-values($fruits-data) => (korea,china,japan)

$fruits-data: (
	apple:korea,
	orange:china,
	banana:japan
);
@each $fruit, $country in $fruits-data{
	$fruits-data--key-list:map-keys($fruits-data);
	$index:index($fruits-data--key-list, $fruit);
	.box-#{$fruit}{
    	width:$index * 100;
		background:url("/images/#{$country}.png")
	}
}

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스