Aggiungere un foglio di stile personalizzato in Gantry 5 è un processo abastanza semplice. In sostanza consiste nella creazione di un file SCSS/CSS in cui si devono inserire delle istruzioni CSS personalizzate. Questo file si deve chiamare custom.scss e può essere creato con un qualsiasi editor di testo.
Una volta creato bisogna copiarlo in g5_hydrogen\custom\scss\

Fatte attenzione perché all'inizio, le cartelle custom e scss non esistono, quindi bisogna crearle a mano.

Il file verrà quindi compilato come un override per i fogli di stile predefiniti del template. Tutte le istruzioni che si inseriscono in questo file sovrascriverà le classi e le impostazioni predefinite. Nel caso in cui non vengono interpretate queste istruzioni, bisogna verificare se la sintassi è scritta bene e magari aggiungere l'attributo !important.
Il formato del file può essere sia SCSS che CSS. Gantry lo prenderà e lo compilerà in automatico indipendente dall'estensione.

Faccio una parentesi, Gantry si può trovare in una delle due modalità: Production e Development. Queste modalità possono essere abilitate dal Gantry Admin > Extras

Se è abilitata la modalità Production, in questo caso, per applicare le istruzioni CSS inserite nel file custom.scss bisogna andare in nel pannello Styles del'Outline desiderato e cliccare sul pulsante Recompile CSS.

Nel caso in cui è abilitata la modalità Development, Gantry recompila i file CSS in modo automatico senza cliccare su Recompile CSS.

Dependencies.scss

Sono incluse le variabile e le librerie di Bourbon, Nucleus e del template stesso nel file _dependencies.scss.
Quindi, per poter utilizzarle nel vostro template, bisogna importare questo file in custom.scss utilizzando l'istruzione @import "dependencies";

Approfondimenti su Sass e SCSS

Ecco alcune risorse per aiutarvi a conoscere SCSS e scoprire il motivo per cui sta diventando rapidamente la soluzione preferita per gli sviluppatori Web in tutto il mondo.