Estendere le classi: EXTEND con SASS

  1. https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/
  2. https://umbriawayfocus.wordpress.com/2020/05/10/sass-e-le-variabili-come-passare-da-una-fiat-500-a-una-macchina-forgiata-a-maranello/
  3. https://umbriawaynoir.wordpress.com/2020/05/10/nesting-come-nidificazione-ovvero-quando-la-scatola-dentro-la-scatola-ospita-un-altra-scatola-e-il-tutto-si-riduce-in-poche-righe-di-codice/
  4. https://umbriawayvendita.wordpress.com/2020/05/10/mixins-sass-e-sai-cosa-bevi/

web designer umbriaDopo aver visto Sass nella sua attivazione, le variabili, la nidificazione NESTLING e i MIXINS, ossia parti di codice riutilizzabile, stiamo per fare un salto quantico nelle EXTEND, visionando l’indirizzo https://www.farwebdesign.com/projectsass/extend/ dove abbiamo a che fare con una parola che estende una classe già definita per applicarla a un’ altra senza contenuti. L’esempio classico quando mi ritrovo un header che ha certe caratteristiche di colore e testo e voglio magari estendere quelle proprietà a un footer sottostante o a un banner del content che ha le stesse caratteristiche. La nostra pagina HTML per questo esempio é:

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

Vediamo in azione il file main.scss contenuto nella cartella di origine conversione in css ossia la scss In neretto le zone critiche che spiegano l’idea che si nasconde dietro le EXTEND, un concetto molto simile al famoso INHERIT (ereditarietà) della programmazione tradizionale:

$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;
}
}
}

.heading {
color: $color-primary;
font-size: $font-lg;
background-color: $color-secondary;
text-align: center;
}

h1 {
@extend .heading;

&:hover {
background-color: green;
}
}

.footer h3 {
@extend h1;
}

Il risultato finale come già visto é https://www.farwebdesign.com/projectsass/extend/ . Lew classi vengono estese utilizzando il richiamo della chiocciola e il problema degli hover sui link sono risolti grazie all’ uso dell’ &. Nella prossima esplorazione ci spingeremo a visionare le function in SASS, una evocazione magica che promette qualche rivelazione importante!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...