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.
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!
