SASS e le variabili: come passare da una Fiat 500 a una macchina forgiata a Maranello!

Dopo aver visto https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ come introduzione adesso sappiamo come usare SASS perché il nostro ambiente è già configurato, dobbiamo per prima cosa aprire la finestra terminale posizionarci a ridosso della cartella con i comandi cd nomecartella quindi nel mio caso cd desktop/projectsass e dare il comando:

>npm run watch

che produrrà sulla CLI un messaggio positivo:

> testsass@1.0.0 watch C:\Users\Umbriaway\Desktop\testsass
> node-sass -o css scss/main.scss -w

dopo aver effettuato questa operazione il processo di conversione da scss a css avviene in automatico. Ora mettiamoci a studiare creando una index.html che conterrà alcuni elementi, vogliamo sperimentare l’idea di variabile in SASS:

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

in main.scss (sulla struttura di un progetto sass vedere https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ ). Ora per chi ama il simbolo del dollaro ed è abituato a PHP a JQuery qui siamo al settimo cielo perché le variabili si dichiarano proprio in questa modalità, quindi provare i seguenti arbitrari stili definendo prima le variabili e andando a sostituire poi nelle regole solo i valori che saranno già circoscritti:


$color-primary: orange;

$color-secondary: grey;
$color-tertiary: royalblue;

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

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

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

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

Ma quali vantaggi abbiamo a procedere in questo modo? Intanto salta subito all’ occhio che lavorando sui SCSS non è che facciamo più fatica, anzi semplifichiamo parecchio perché come abbiamo già visto grazie al comando npm run watch da finestra terminale possiamo automatizzare la generazione di un file CSS. Ma qui possiamo giocarcela su una migliore gestione e un più preciso controllo sulla stilizzazione in quanto con una semplice modifica dei valori che voglio vedere a video potrò senza stravolgere il mio foglio stile mettere in pratica delle variazioni che non vincolano. Vediamo ad esempio che appunto le variabili si dichiarano inserendo prima il simbolo $ e vediamo anche uno strano fenomeno, perché in alcuni punti le variabili sono dichiarate all’ interno delle parentesi graffe. Significa qualcosa? Significa che c’è una dichiarazione delle variabili a livelo GLOBALE e una dichiarazione invece valida a livello LOCALE, in questo modo se ho due rossi non entro in collisione tra elementi della pagina. Per esempio leggiamo sulla dichiarazione del selettore di classe banner h1 la seguente variabile $color-secondary: red !global; questa dichiarazione contrassegnata dall’ espressione !global che significa diverso da global ci consentirà di rendere autonome due situazioni diverse che nond ipendono tra loro: da un lato abbiamo il grey che vale a livello globale ma quando scss incontra la variabile locale che ha lo stesso nome della globale differirà sull’impostazione del colore senza creare conflitti, in quanto la variabile locale è proprio contrassegnata da una dichiarazione che vale tra le parentesi graffe o blocco circoscritto. Cambia qualcosa nel foglio stile marcato con il link verso il CSS? NO è sempre il solito CSS3 che conosciamo:

.nav {
background-color: orange; }

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

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

Per vedere dal vivo le variazioni rispetto a quelle di base qui presenti e l’esperimento in se, visitare https://www.farwebdesign.com/projectsass/variabili/ , vediamo che poi di fatto per chi deve vedere la pagina non cambia nulla rispetto a chi usa solo CSS, con la differenza che qui le possibilità di semplificare, ottimizzare e potenziare i nostri vestiti con scss sono notevolmente amplificate! E come passare da una faretra con una freccia a molte frecce contundenti!

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