Introduzione

Dalla versione 5.0, è stato introdotto un nuovo sistema di gestione della parte SCSS del tema child.

La prima sostanziale novità è nel nome della cartella del progetto, che ora si chiama scss.

In questa nuova versione, il progetto SCSS è stato completamente riscritto e riorganizzato, pertanto non è retrocompatibile con le vecchie versioni.

Attenzione!!!

Nelle prossime release (sempre versione 5*), per quanto riguarda la compilazione SASS, è possibile che venga abbandonato il sistema Grunt. Sarà cura dello sviluppatore rendere indolore questo passaggio.

Allo stato attuale, dato che ancora il compilatore Grunt utilizza una vecchia versione Ruby, non vengono emessi i warning di uso di codice deprecato, questo anche per evitare che questi warning vengano generati da librerie esterne non ancora aggiornate, come ad esempio FontAwesome.

Versione 4*

Questa sezione della documentazione è relativa soltanto alla versione 5* di DiviChild.
Per la documentazione su SCSS della versione 4*, clicca qui

DarkMode e Colori Default

In queste prime release della versione 5, sia la palette standard che i colori reattivi al Dark Mode (ovvero i neutral) sono stati solamente abbozzati, questo per mancanza di tempo e per via del fatto che il progetto serve comunque ad avviare lavori nuovi e che quindi i colori devono comunque essere rivisti.

Cosa cambia nella nuova versione SASS

La principale differenza è nel fatto che SASS si è adeguato al concetto di programmazione a moduli (vedi Javascript o Pyton). Questo nuovo approccio ha di fatto deprecato il concetto di @import a vantaggio di @use e @forward.

https://sass-lang.com/blog/import-is-deprecated/ (opens new window)

Se prima, includendo ad esempio il file _variables.scss in testa al file style.scss, tutti i file importati successivamente con @import ereditavano le variabili al loro interno, adesso questo non è più possibile. Ora si dovrà, in ogni file dove si intende utilizzare le variabili espresse in _variables.scss, importare con @use il file _variables.scss.

Di seguito un banale esempio a tre file di cui un entry point e quattro partial

style.scss
_variables.scss
_mixins.scss
_file_1.scss
_file_2.scss

Nell'entry point importeremo con @use, soltanto i file _file_1.scss e _file_2.scss

// file style.scss
@use "./file_1";
@use "./file_2";

Mentre nei due restanti partials, dove vogliamo usare variabili e mixin, dovremo importare ogni volta i due relativi file

// file _file_1.scss
@use "./variables";
@use "./mixins";

.classe {}

// file _file_2.scss
@use "./variables";
@use "./mixins";

.classe {}

Per maggiori approfondimenti sull'uso di @use rimando alla documentazione ufficiale: https://sass-lang.com/documentation/at-rules/use/ (opens new window)

@forward

L'uso di @forward è un po' più complesso e richiede uno studio un po' più approfondito e di fatto potrebbe anche non servire, se non dove è già stato usato, nei progetti Divi-Child based.

Per approfondire rimando alla documentazione ufficiale: https://sass-lang.com/documentation/at-rules/forward/ (opens new window)

Webpack

Dalla versione 5.1.0 la compilazione di SASS avviene attraverso Webpack. Lanciando da console il comando npm run dev i file scss vengono compilati nel file css del tema style.css e contestualmente viene lanciato un task watch che compilerà automaticamente i file ogni volta che un file .scss contenuto nella cartella sass/ viene modificato.

Grunt.js

I task di compilazione attraverso Grunt non sono stati ancora eliminati e possono di fatto essere ancora usati, anche se si consiglia caldamente l'uso di Webpack. I task Grunt rimangono invece invariati per quanto riguarda la parte di sviluppo del tema child.