SCSS: nesting

Nesting
- previene repetición de código
- no tenemos que escribir los selectores completos para cada regla
- al compilar SCSS se produce el archivo CSS que sí tiene las reglas
completas
- permite lograr lo mismo, escribiendo menos código
Ejemplo: en lugar de escribir CSS
article {

background: #CCC;

article p {

color: red;

}
Escribimos SCSS
article {

background: #CCC;

p {

color: red

}
Ejemplo 2
SCSS
article {
background: #CCC;
@media (min-width: 768px) {
background: #FFF;
}
p {
color: red;
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
}
}
CSS
article {
background: #CCC;
}
@media (min-width: 768px) {
article {
background: #FFF;
}
}
article p {
color: red;
}
article p a {
color: blue;
}
article p a:hover {
text-decoration: underline;
}
Práctica
Ejercicio 2
Utilice el código que está en mediación con el nombre de excercise2.html y
conviértalo de forma tal que utilice SCSS. Debe utilizar variables y nesting.