LESS에서 선택자 결합

컴파일 시 중첩된 구조가 공백이 아닌 연결되어 나오게 해야 할 때가 있습니다. 이를 위해서는 중첩된 선택자 이름 앞에 앰퍼샌드(&)를 붙여야 합니다:

div {
	&.block {
		width: 300px;
	}
}

결과적으로 컴파일 후에는 다음과 같은 코드가 생성됩니다:

div.block {
	width: 300px;
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

#block {
	&.xxx {
		width: 300px;
	}
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

#block {
	.xxx {
		width: 300px;
	}
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

#block {
	&.xxx {
		&.zzz {
			width: 300px;
		}
	}
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

#block {
	&.xxx {
		.zzz {
			width: 300px;
		}
	}
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

#block {
	.xxx {
		&.zzz {
			width: 300px;
		}
	}
}