Nesting come nidificazione: ovvero quando la scatola dentro la scatola ospita un’ altra scatola e il tutto si riduce in poche righe di codice!

web developer Nocera Umbra

Dopo aver visto come configurare l’ambiente di sviluppo per la compilazione di un css partendo da scss all’ indirizzo https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ e dopo aver visto l’uso delle variabili https://umbriawayfocus.wordpress.com/2020/05/10/sass-e-le-variabili-come-passare-da-una-fiat-500-a-una-macchina-forgiata-a-maranello/ , andiamo oltre e diamo un occhiata alle NESTING. Per fare ciò si usa la finestra terminale degitando il comando npm run watch dopo essersi posizionati dentro la cartella di interesse.web design umbria Ho provato a chiedere a Google come mi traduce NESTING e mi ha sparato un polpettone del tipo “tendenza di vivere nell’ intimità domestica e in ambienti accoglienti caldi e rassicuranti come un nido“. Senza farlo apposta la NIDIFICAZIONE ha fatto centro e si pone come strumento di facile comprensione per questa tecnica SASS. Analizziamo quindi l’esempio reale presente in https://www.farwebdesign.com/projectsass/nesting/ dove il principio di un atomo melocola scomposta salta subito all’ occhio. Vediamo come è composta la pagina html e notiamo in particolare la sezione legata alla NAV, agli UL, agli LI e alle ancore ad essi contenute:

<head>
<meta charset=”UTF-8″ />
<link rel=”stylesheet” href=”css/main.css” />
<title>SASS Variables</title>
</head>
<body>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

<section class=”banner”>
<h1>Page Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem consequuntur molestias nihil dolor delectus similique culpa fugiat, numquam magnam.</p>
</section>

<footer class=”footer”>
<h3>Footer Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, laudantium.</p>
</footer>
</body>

Adesso diamo un occhiata a come è fatto il file scss nel main.scss ma attenzione, cerchiamo di non cadere dalla sedia per lo stupore:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color: $color-primary;

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

.banner h1 {
font-size: $font_lg;
color: $color-secondary;
text-align: center;
}

.footer h3 {
font-size: $font-md;
color: $color-secondary;
text-align: center;
}

Visto che cosa fa la nav? Si apre per lasciare spazio a un componente UL che a sua volta nidifca un componente LI che a sua volta ospita le A di ancore che a sua volta chiamò il gatto che mangiò il topo che alla fiera mio padre comprò…vabbè tranne l’ultima parte è palese che siamo di fronte a un gioco a incastro dove pesce grande, mangia pesce piccolo e questi il pesce piccolissimo Vabbè ma tutto questo che ripercussioni ha sul file CSS che verrà generato in automatico? Nessuna infatti staticamente leggeremo dopo la compilazione automatica:

.nav {
background-color: orange; }
.nav ul li {
list-style: none; }
.nav a {
text-decoration: none;
font-size: 20px;
color: gray; }
.nav a:hover {
color: royalblue; }

.banner h1 {
font-size: 40px;
color: gray;
text-align: center; }

.footer h3 {
font-size: 30px;
color: gray;
text-align: center; }

SASS è qualcosa che si capisce quindi, non è come Angular dove viene richiesto di travestirsi da moderni Champollion per decifrare i geroglifici, una tecnologia che sembra stata inventata per scoraggiare pochi eletti al suo altare! Lunga vita alla stele di SASS e agli aspiranti web designer! Importante tecnicamente: l’unica stranezza che salta all’ occhio è quella dell’ & sull’hower che se verrebbe omesso genererebbe un css dove ci sarebbe uno spazio in .nav a: hover { per cui il css non funzionerebbe , questi dettagli sono decisamente importanti. Per sperimentare l’hover, ossia l’evento in cui l’utente fa scorrere il mouse sopra il link cambiando alcune sue caratteristiche, esempio all’ indirizzo https://www.farwebdesign.com/projectsass/nesting/ . In uno dei prossimi appuntamenti andremo a curiosare sui MIXINS in SASS!