Final SASS con Funzioni, Placeholder e Import: ma la fine di un viaggio é solo l’inizio!

Per completare un overview didattico con SASS ci mancano le funzioni, i placeholder e gli import. Abbiamo visto come configurare l’ambiente di sviluppo (la parte più complicata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ poi abbiamo scandagliato le variabili https://umbriawayfocus.wordpress.com/2020/05/10/sass-e-le-variabili-come-passare-da-una-fiat-500-a-una-macchina-forgiata-a-maranello/ ci siamo spinti ad analizzare le nidificazioni 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/ abbiamo visto i mixins, blocchi di codice riutilizzabili https://umbriawayvendita.wordpress.com/2020/05/10/mixins-sass-e-sai-cosa-bevi/ e infine abbiamo visionato l’estensione delle classi con https://umbriawayvalorizza.wordpress.com/2020/05/11/estendere-le-classi-extend-con-sass/. I blocchi della pagina statica non sono cambiati rispetto alle trascrizioni della pagina precedente per cui limitiamoci a visionare il seguente esempio per le FUNZIONI, indirizzo https://www.farwebdesign.com/projectsass/function/ . Qui la particolarità è che se io sto disegnando una User Interface e voglio focalizzarmi su una serie di elementi che in prospettiva devono rimanere dimensionalmente intonati, posso dare la cera lacca ai capelli con le funzioni. Spiegano meglio la metafora ipotizziamo di avere una header che ospita una intestazione con un font grande sessanta pixel. Se all’ interno di una sezione o di una news sottostante ho un testo che vorrei dimensionare come fisso indipendentemente dalle variazioni che apporterò sulla header, posso impostarlo magari settando una semplice funzione che divide il valore dell’ inestazione per due a prescindere:

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

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

.nav {
background-color:
mix(blue, green, 10%);

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

@function fontSize($size: 25px) {
@return $size * 2;
}

h1 {
@extend .heading;

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

.footer h3 {
@extend h1;
}

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

dove da notare c’è:

@function fontSize($size: 25px) {
@return $size * 2;
}

che in questo caso moltiplica per due un valore AUTOMATIZZANDO UN PROCESSO, perchè a questo servono le funzioni, assolvono compiti specifici tra i più svariati come una pubblicità mandata in loop a intervalli regolari su una emittente privata, per esempio. Le funzioni ritornano una serie di istruzioni lì nel punto esatto in cui sono invocate. In particolare la funzione viene richiamata (semplicemente invocando il nome della funzione) in diverse situazioni dove in ingresso sono specificati degli argomenti:

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

per uno più esteso di function con tutte le opzioni disponibili si rimanda alla documentazione di SASS perchè appunto il materiale è vasto e richiede di volta in volta di essere estrapolato nei suoi meccanismi base: https://sass-lang.com/documentation/at-rules/function. Passiamo ai selettori placeholder. Spesso durante la conversione da scss a css potrebbe generarsi codice non strettamente necessario. Per ovviare a questo tipo di situazione entrano in gioco i SELETTORI PLACEHOLDER, esempio https://www.farwebdesign.com/projectsass/placeholder/ . La meccanica di questa direttiva è molto ben spiegata in questo articolo https://www.mrwebmaster.it/css/direttiva-extend-placeholder_12629.html, dove viene introdotto il carattere % per aggirare gli ostacoli sulla estensione della classe, nell’ esempio specifico visto sopra il file scss è infatti:

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

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

.nav {
background-color:
mix(blue, green, 10%);

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

da notare il @extend %heading; che appunto risolve il problema della ridondanza. Infine parliamo di IMPORT E PARTIAL , esempio https://www.farwebdesign.com/projectsass/import/ ; Proprio come i CSS, Sass supporta anche la direttiva @import. La direttiva @import consente di includere il contenuto di un file in un altro. La direttiva CSS @import ha un grosso svantaggio a causa di problemi di prestazioni; crea una richiesta HTTP aggiuntiva ogni volta che la chiami. Tuttavia, la direttiva Sass @import include il file nel CSS; quindi non è necessaria alcuna chiamata HTTP extra in fase di esecuzione! Una spiegazione chiara di tali principi possiamo ritrovarla qui https://www.w3schools.com/sass/sass_import.asp dove consigliamo anche di seguire i tutorial e l’iniziazionebase su SASS: https://www.w3schools.com/sass/sass_intro.asp . Mettendo in gioco Pareto e wikipedia, il principio di Pareto è un risultato di natura statistico-empirica che si riscontra in molti sistemi complessi dotati di una struttura di causa-effetto. Il principio afferma che circa il 20% delle cause provoca l’80% degli effetti. Questi valori vanno da intendersi come qualitativi e approssimativi. Esso prende il nome da Vilfredo Pareto (1848-1923), uno dei maggiori economisti e sociologi italiani e trova applicazione in una sorprendente moltitudine di ambiti e discipline. Qui il venti per cento di acquisizione sull’ ottanta per cento di esplorazione didattica ce lo siamo portati a casa, in particolare l’aspetto più complicato dell’ intera faccenda SASS è legato alla configurazione dell’ ambiente di sviluppo, vedere prima puntata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ . Superato l’ostacolo CLI dopo è solo sperimentazione di variabili, nesting, mixin, funzioni, import, placeholder e PARTIAL per segmentare il codice, vedere https://www.w3schools.com/sass/sass_import.asp ; sostanzialmente il PARTIAL in SASS compila tutti i file .scss. Tuttavia, quando si desidera importare un file, non è necessario che il file venga trasferito direttamente. Sass ha un meccanismo per questo: se si avvia il nome file con un trattino basso, Sass non lo compila, I file chiamati in questo modo sono chiamati parziali in Sass. Pertanto, un file Sass parziale viene denominato con un trattino basso iniziale.

CONSLUSIONI: abbiamo preso confidenza con uno strumento potente, necessario come arma da integrare nel proprio arsenale di conoscenze web. Sappiamo che l’argomento è molto complesso e ben lontano dall’ esaurirsi da questa trattazione, del resto la documentazione presente in rete per approfondire questi temi non manca. Ci siamo fatti una idea generale del suo funzionamento, abbiamo volato e visto la foresta dall’ alto toccando di volta in volta qualche albero abbassandoci di quota per poi risalire e approdare altrove, abbiamo ritocatto file e provato variazioni di codice, abbiamo costruito una mappa generale e definito il campo di gioco. A questo punto se subentrasse la necessità di integrare (anche) SASS nei nostri progetti sappiamo dove andare a parare. Non ci resta che prepararci per il passo successivo, che è quello di impugnare una lente di ingrandimento, uscire da una visione filosofica olistica e incominciare a vedere i singoli dettagli della corteccia quando dovesse subentrare questa esigenza!