Introduzione a Sass per i nuovi designer di temi WordPress

Come nuovo designer di temi WordPress, si imparano rapidamente le sfide di mantenere lunghi file CSS mantenendoli organizzati, scalabili e leggibili.

Molti designer e sviluppatori front-end, inclusi quelli di WPBeginner, raccomandano l'uso di un linguaggio di pre-elaborazione CSS come Sass o LESS per semplificare il lavoro. Ma cosa sono questi preprocessori? E come si inizia?

Questo articolo è un'introduzione a Sass per i nuovi designer di temi WordPress. Ti diremo cos'è un preprocessore CSS, perché ne hai bisogno e come installarlo e iniziare a usarlo subito.

Cos'è Sass (Syntactically Awesome Stylesheet)?

Il CSS che usiamo è stato progettato per essere un linguaggio di fogli di stile facile da usare. Tuttavia, il web si è evoluto, e quindi i designer hanno bisogno di un linguaggio di fogli di stile che permetta loro di fare di più con meno sforzo e tempo.

I linguaggi di pre-elaborazione CSS, come Sass, ti permettono di utilizzare funzionalità non attualmente disponibili in CSS come variabili, operatori matematici di base, annidamento, mixin, ecc.

È molto simile a PHP, che è un linguaggio di pre-elaborazione che esegue uno script sul server e genera un output HTML. Allo stesso modo, Sass pre-elabora i file .scss per generare file CSS che possono essere utilizzati dai browser.

Dalla versione 3.8, gli stili dell'area di amministrazione di WordPress sono stati portati a utilizzare Sass per lo sviluppo. Ci sono molti negozi di temi WordPress e sviluppatori che utilizzano già Sass per velocizzare il loro processo di sviluppo.

Introduzione a Sass per lo sviluppo di temi WordPress

La maggior parte dei designer di temi utilizza un ambiente di sviluppo locale per lavorare sui propri temi prima di distribuirli su un ambiente di staging o su un server live. Poiché Sass è un linguaggio di pre-elaborazione, dovrai installarlo sul tuo ambiente di sviluppo locale.

La prima cosa da fare è installare Sass. Può essere utilizzato come strumento da riga di comando, ma ci sono anche alcune ottime app GUI disponibili per Sass. Consigliamo di utilizzare Koala, che è un'app gratuita open source disponibile per Mac, Windows e Linux.

Ai fini di questo articolo, dovrai creare un tema vuoto. Crea semplicemente una nuova cartella in /wp-content/themes/. Puoi chiamarla 'mytheme' o qualsiasi altro nome desideri. All'interno della cartella del tuo tema vuoto crea un'altra cartella e chiamala stylesheets.

Nella cartella stylesheets, devi creare un file style.scss utilizzando un editor di testo come Blocco note.

Ora devi aprire Koala e fare clic sull'icona più per aggiungere un nuovo progetto. Successivamente, individua la directory del tuo tema e aggiungila come tuo progetto. Noterai che Koala troverà automaticamente il file Sass nella tua directory degli stili e lo visualizzerà.

Fai clic destro sul tuo file Sass e seleziona l'opzione Imposta percorso di output. Ora seleziona la radice della directory del tuo tema, ad esempio, /wp-content/themes/mytheme/ e premi Invio. Koala genererà ora il file di output CSS nella directory del tuo tema.

Per testare questo, devi aprire il tuo file Sass style.scss in un editor di testo come Blocco note e aggiungere questo codice:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Ora devi salvare le modifiche e tornare a Koala. Fai clic destro sul tuo file Sass e la barra laterale scorrerà verso destra. Per compilare il tuo file Sass, fai semplicemente clic sul pulsante ‘Compila’.

Puoi vedere i risultati aprendo il file style.css nella directory del tuo tema, e avrà il CSS elaborato come questo:

body {
  font-family: arial, verdana, sans-serif; }

Nota che abbiamo definito una variabile $fonts nel nostro file Sass. Ora ogni volta che avremo bisogno di aggiungere una famiglia di font, non dovremo digitare nuovamente i nomi di tutti i font. Possiamo semplicemente usare $fonts.

Quali altri superpoteri porta Sass al CSS?

Sass è incredibilmente potente, retrocompatibile e super facile da imparare. Come abbiamo detto in precedenza, puoi creare variabili, nidificazione, mixin, importazioni, parziali, operatori matematici e logici, ecc.

Ora ti mostreremo alcuni esempi, e puoi provarli sul tuo tema WordPress.

Gestione di più fogli di stile

Un problema comune che affronterai come designer di temi WordPress sono i fogli di stile di grandi dimensioni con molte sezioni. Probabilmente scorrerai su e giù molte volte per correggere le cose mentre lavori sul tuo tema.

Usando Sass, puoi importare più file nel tuo foglio di stile principale e generare un singolo file CSS per il tuo tema.

E il comando @import di CSS?

Il problema con l'uso di @import nel tuo file CSS è che ogni volta che aggiungi un @import, il tuo file CSS effettua un'altra richiesta HTTP al server. Questo influisce sul tempo di caricamento della pagina, il che non è un bene per il tuo progetto.

D'altra parte, quando usi @import in Sass, includerà i file nel tuo file Sass e li servirà tutti in un unico file CSS per i browser.

Per imparare come usare @import in Sass, devi prima creare un file reset.scss nella directory dei fogli di stile del tuo tema e incollarci questo codice.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Ora devi aprire il tuo file principale style.scss e aggiungere questa riga dove vuoi che venga importato il file di reset:

@import 'reset';

Nota che non è necessario inserire il nome completo del file. Per compilarlo, devi aprire Koala e fare di nuovo clic sul pulsante di compilazione. Ora apri il file style.css principale del tuo tema e vedrai il tuo CSS di reset incluso in esso.

Nidificazione in Sass

A differenza di HTML, CSS non è un linguaggio nidificato. Sass ti permette di creare file nidificati che sono facili da gestire e con cui lavorare. Ad esempio, puoi nidificare tutti gli elementi per la sezione <article>, sotto il selettore dell'articolo.

Come designer di temi WordPress, questo ti permette di lavorare su diverse sezioni e stilizzare facilmente ogni elemento. Per vedere la nidificazione in azione, aggiungi questo al tuo file style.scss:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Dopo l'elaborazione, genererà il seguente CSS:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Come designer di temi, progetterai un aspetto e una sensazione diversi per i widget, i post, i menu di navigazione, l'intestazione, ecc. L'uso della nidificazione in Sass lo rende ben strutturato e non dovrai scrivere le stesse classi, selettori e identificatori più e più volte.

Utilizzo dei Mixin in Sass

A volte avrai bisogno di riutilizzare del CSS nel tuo progetto, anche se le regole di stile saranno le stesse perché le utilizzerai su diversi selettori e classi. È qui che i mixin tornano utili. Aggiungiamo un mixin al tuo file style.scss:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Questo mixin nasconde fondamentalmente del testo dall'essere visualizzato. Ecco un esempio di come puoi usare questo mixin per nascondere il testo per il tuo logo:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Nota che devi usare @include per aggiungere un mixin. Dopo l'elaborazione, genererà il seguente CSS:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

I mixin sono anche molto utili con i prefissi dei fornitori. Quando aggiungi valori di opacità o il raggio del bordo, usando i mixin puoi risparmiare molto tempo. Guarda questo esempio, dove abbiamo aggiunto un mixin per aggiungere il raggio del bordo.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Dopo la compilazione, genererà il seguente CSS:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Risorse aggiuntive

Sass Lang
The Sass Way

Speriamo che questo articolo ti abbia aiutato a conoscere Sass per lo sviluppo di temi WordPress. Molti designer di temi WordPress lo utilizzano già. Alcuni arrivano a dire che in futuro tutto il CSS sarà preprocessato e gli sviluppatori di temi WordPress dovranno migliorare le loro competenze. Potresti anche voler consultare la nostra guida su suggerimenti sulla classe body di WordPress per i designer di temi, o le nostre scelte esperte dei migliori page builder drag and drop per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.