Quando Il Signore dei fogli di stile il settimo giorno creò SASS

web designer umbria

E’ scritto in tutte le bibbie dei web designer, stanco perchè durante la settimana aveva creato javascript, vue, react, angular, jquery e ionic e tanto altro il signore dei fogli di stile che voleva riposarsi decise di limitarsi a usare la domenica per mettere in piedi SASS:

Wikipedia: Sass (Syntactically Awesome StyleSheets) è un’estensione del linguaggio CSS che permette di utilizzare variabili, di creare funzioni e di organizzare il foglio di stile in più file. Il linguaggio Sass si basa sul concetto di preprocessore CSS, il quale serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

Se hai deciso di occuparti di web design e sviluppo web non puoi non conoscere questa tecnologia sempre di più richiesta da chi cerca personale specializzato per mandare satelliti su Marte. Vediamo quindi come appicare le informazioni presenti in https://sass-lang.com/ tenendo sempre presente che uno sviluppatore non ha una capacità di memorizzazione illimitata perchè oggi più che mai le tecnologie sono infinite e il loro utilizzo molto variabile per cui quello che deve fare se ha un minimo di buon senso è attingere ogni volta in base alle circostanze alla documentazione per estrapolare quello che necessita nella costruzione dei suoi applicativi. Vediamo quindi come mettere in pratica le nozioni base di SASS. Intanto creo una cartella di test sul desktop che chiamerò testsass dentro la quale costruisco il seguente file system: due cartelle rispettivamente di nome css e scss ognuna delle quali conterrà due file di nome rispettivamente main.css e main.scss. Nella root di questa struttura inserisco solo un file html che avrà la solita struttura con in più il riferimento al link esterno, in questo caso <link rel=”stylesheet” href=”css/main.css” type=”text/css” />. Fatto questo e superato ormai da tempo il nuovo trauma provocato dalla CLI, un uso che sta rivoluzionando il modo di fare innovazione oggi, apro la finestra terminale e inizio a pensare a come mettere SASS nella condizione di precompilare i miei fogli di stile CSS. Dando per scontato che ormai NODE e NPM sono stati installati perchè sono di uso frequente quasi quanto un frigorifero nella quotidianità casalinga, iniziamo a dare i nostri comandi da finestra terminale che in windows si richiama con cmd. Quindi abbiamo per riassumere una foglio scss e una pagina html:

<html>
<head>
<title>esercitazione di sass</title>
<link rel=”stylesheet” href=”css/main.css” type=”text/css” />
</style>
</head>
<body>

<h1>intestazione</h1>
<p>paragrafo</p>

</body>
</html>

Prima però rispondiamo a una domanda critica: quali strumenti di sviluppo necessitano per abbellire e rendere più performanti le mie interfacce grafiche con SASS?

Risposta:

Google Chrome:
https://www.google.com/chrome/

Mozilla Firefox:
https://www.mozilla.org/en-US/firefox/

Brackets:
http://brackets.io/

Visual Studio Code:
https://code.visualstudio.com/

Se sei nel dubbio di avere o no installato node e con lui il fondamentale npm che ci fa installare i pacchetti puoi dare rispettivamente i comandi:

node –version
npm –version

che rimandano alle versioni installate. Adesso dobbiamo aprire il nostro foglio di stile della cartella SCSS con il nostro editor di codice preferito che leggerà tutta la cartella testscss e nel main vuoto scriviamo una regola di prova del tipo:

body {
background-color:green;
}

Se apro la pagina HTML ovviamente vedrò il nulla perchè il link CSS esterno punta sul file con estensione css che adesso e vuoto e non sul main.scss dove ora abbiamo scritto la regola di stile. Quindi come avviare una compilazione automatica in modo che quando ho un file scss automaticamente avrò anche un css? Il primo passo da fare è inizializzare il nostro progetto quindi posizionandomi sulla cartella tessass con i comandi cd desktop e cd testsass darò il seguente comando per generare il file package.json che è il motore centrale di tutti i progetti che hanno dipendenze e moduli da caricare, quindi impartirò il comando:

npm init –yes

dove l’opzione finale –yes serve ad aggirare l’ostacolo di una domanda di default che ci verrà posta se procediamo con l’istallazione senza opzioni, ossia se vogliamo che il file index.js sia il primo ad essere caricato nel main al momento dell’ esecuzione, verrà creato quanto segue:

{
“name”: “testsass”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

A questo punto sono pronto per installare SASS con il comando :

npm install -g node-sass

 

ci verrà confermato che è andato tutto bene:

Testing binary
Binary is fine
+ node-sass@4.14.1
updated 1 package in 23.17s

E infine posso dare il comando per trasporre un file scss e compilarlo in css con il comando:

node-sass -o css scss/main.scss

e otterremo un messaggio di conferma che è andato tutto bene di nuovo (strano siamo nel 2020):

Rendering Complete, saving .css file…
Wrote CSS to C:\Users\Umbriaway\Desktop\testsass\css\main.css

A questo punto la magia che abbiamo fatto senza saperlo si è compiuta: se apriamo la index di prima che era bianca adesso invece ubbedisce alla regola di stile che gli impone di avere un colore di sfondo anche se nel il link esterno sui css punta su qualcosa che non esiste di suo, ma viene compilato ogni volta dal preprocessor SCSS. Adesso però abbiamo un problema, non c’è un modo per automatizzare questa procedura di compilazione, nel senso che non posso stare ogni volta a digitare un comando di compilazione appena si aggiunge una regola di stile. Qui ci viene in aiuto il file package.json. In sintesi il problema è che se andassi ora a cambiare il colore di sfondo della pagina sul file formato SCSS inserendo yellow per esempio, riaggiornando la pagina html vedrei sempre la pagina del nostro colore di default, quindi bisogna fare in modo che la trasposizione da SCSS a CSS con la generazione del nuovo file main.css avvenga in automatico. Aggiungiamo un opzione al comando precedente:

node-sass -o css scss/main.scss -w

dopo aver aggiunto l’opzione -w finale (-o stava a significare output) che sta per watch se adesso vado nel file scss e cambio il valore del colore di sfondo la fase di processo del file per generare css avviene in automatico, provare per credere e la pagina mi mostrerà il colore di sfondo modificata. A questo punto dobbiamo modificare il file package.json nella sezione script e trasformarlo in:

{
“name”: “testsass”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“watch”: “node-sass -o css scss/main.scss -w”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

con CTRL + C interrompo i processi batch della finestra terminle per dare il comando fondamentale:

npm run watch

che in automatico mi consentirà di generare il nuovo file css da sovrapporre al precedente. Quindi quando si inizia a lavorare la prima cosa da fare è sempre lanciare UNA SOLA VOLTA il comando recedente che genererà un messaggio di attivazione automatizzato:

Rendering Complete, saving .css file…
Wrote CSS to C:\Users\Umbriaway\Desktop\testsass\css\main.css

CONCLUSIONI: fortemente motivati perchè quelli della NASA ci hanno detto di cercare uno sviluppatore che conosce SASS, ci siamo lanciati nell’ azione preliminare di generare un ambiente di sviluppo funzionale, ossia ci siamo messi nella condizione di convertire i file scss in css e a questo punto abbiamo chiaro anche il vantaggio: i css sono utilitarie ma scss come risorsa ha molto molto di più e possiamo equipararlo a una Ferrari! Il nostro skill grazie a SASS migliora impercettibilmente, lode al signore dei fogli di stile che ha creato questo supporto tecnologico il settimo giorno! Ma siamo solo all’ inizio, il nostro viaggio continua in uno dei prossimi tutorial esplorativi su SASS puntando al concetto di variabile di cui CSS 3 è sprovvisto!

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