SASS에서의 셀렉터 결합

때로는 중첩된 구조가 컴파일될 때 공백을 통해 연결되지 않고 하나로 합쳐지기를 원할 때가 있습니다. 이를 위해서는 중첩된 셀렉터 이름 앞에 앰퍼샌드를 붙여야 합니다:

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;
		}
	}
}