SASS의 중첩 구조

SASS에서는 코드 블록을 다음과 같이 서로 중첩할 수 있습니다:

#header {
	.menu {
		color: red;
	}
	.logo {
		width: 100px;
	}
}

결과적으로 컴파일 후에는 블록의 중첩이 해당 선택자의 중첩으로 변환됩니다:

#header .menu {
	color: red;
}
#header .logo {
	width: 100px;
}

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

div {
	p {
		color: red;
	}
	ul {
		color: blue;
	}
}

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

div {
	color: red;
	p {
		color: blue;
	}
}

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

div {
	color: red;
	
	ul {
		color: blue;
		
		li {
			font-size: 20px;
		}
	}
}