Constructions imbriquées dans SASS

Dans SASS, il est possible d'imbriquer des blocs de code les uns dans les autres, de cette manière :

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

En conséquence, après la compilation, l'imbrication des blocs est transformée en l'imbrication des sélecteurs correspondants :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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