Collegare rapidamente SCSS (SASS) in Drupal con il modulo Sassy

SASS/SCSS sono da tempo lo standard per la scrittura del codice CSS. Se ancora non li utilizzi per i tuoi siti, è arrivato il momento di pensarci. Puoi collegare SCSS molto facilmente utilizzando il modulo Sassy; questo è possibile anche su hosting condivisi, poiché la compilazione dei file CSS avviene tramite una libreria PHP.

Cominciamo. Ho un’installazione pulita di Drupal con il tema Zen. Dobbiamo installare il modulo Sassy:

https://www.drupal.org/project/sassy

Il modulo Sassy richiede il modulo Prepro per la compilazione dei file CSS:

https://www.drupal.org/project/prepro

Installa anche il modulo Libraries API, che servirà per collegare la libreria necessaria a Sassy:

https://www.drupal.org/project/libraries

È inoltre necessaria la libreria PHPSass, che traduce il codice SCSS in CSS. Scarica l’ultima versione disponibile cliccando su “Download ZIP”:

https://github.com/richthegeek/phpsass

Copia la libreria nella cartella sites/all/libraries/phpsass, in modo che i file siano organizzati così:
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php
e così via.

Attiva i moduli installati. Ora puoi aggiungere un file SCSS. La mia sottotema si chiama sitemade, quindi apro il file sitemade.info e aggiungo semplicemente la riga:

stylesheets[all][] = css/styles.scss

Come puoi vedere, basta specificare l’estensione .scss; per il resto, i file vengono collegati come di consueto. Ora crea il file css/styles.scss e svuota la cache. Fatto! Il file sarà caricato e funzionante.

Se incontri errori, controlla che la cartella files abbia i permessi 777 e che non ci siano errori nel rapporto di stato. In caso contrario, chiedi nei commenti. Successivamente vedremo le impostazioni di Drupal per lavorare con SCSS e le funzionalità principali di SCSS.

Funzionamento del modulo Sassy

Dopo aver collegato il file SCSS, il modulo Sassy genera codice CSS a partire dallo SCSS e il modulo Prepro salva questo codice, per impostazione predefinita, nella cartella sites/default/files/prepro.

Per evitare che il CSS venga rigenerato a ogni caricamento di pagina (utile per i siti in produzione), puoi disattivare la cache nella pagina delle impostazioni del modulo Prepro:

/admin/config/media/prepro

Per impostazione predefinita, la cache è disattivata e il CSS viene rigenerato a ogni caricamento della pagina. Questo processo è piuttosto rapido, quindi puoi modificare lo SCSS e vedere immediatamente i risultati.

Mozilla Firefox Firebug + FireSass

È molto comodo utilizzare Firebug insieme all’estensione FireSass. Questo consente di vedere in quale riga del file SCSS originale si trova il codice CSS corrispondente:

Se non installi questa estensione, vedrai solo le righe del file CSS già compilato.

Per abilitare FireSass, attiva le seguenti opzioni nella pagina delle impostazioni del modulo Prepro:
/admin/config/media/prepro

Pass @warn and @debug to Watchdog
Include debug information in output

Funzionalità di SCSS

Puoi leggere tutte le funzionalità di SASS/SCSS sul sito ufficiale:

http://sass-lang.com/

La caratteristica principale di SCSS è la nidificazione.

Nidificazione

Puoi scrivere codice senza ripetere i selettori dei genitori, ad esempio:

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
    }
 
    .li-1 {
      background: red;
    }
  }
}

Questo codice è più veloce da scrivere e più leggibile rispetto a:

#menu-1 {
  margin-top: 20px;
}
 
#menu-1 ul {
  margin-left: 0px;
}
 
#menu-1 ul li {
  width: 100px;
  display: inline-block;
}
 
#menu-1 ul li.li-1 {
  background: red;
}

Ora immagina di dover aggiungere stili per un tag <a> dentro <li>, e all’interno di <a> c’è anche un tag <span>. Con la nidificazione, puoi farlo facilmente:

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
 
      a {
        text-decoration: none;
 
        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }
 
    .li-1 {
      background: red;
    }
  }
}

Puoi anche aggiungere lo stato :hover con l’operatore &:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

Che verrà compilato in:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
  font-weight: normal; 
}

Variabili

Un’altra grande funzionalità di SCSS sono le variabili. Puoi definire la palette di colori del sito e utilizzarla ovunque:

$red: #fa0a0a;
$blue: #0a0afa;
$green: #0afa0a;
 
$content: 1200px;
$sidebar: 250px;
 
.sidebar {
  width: $sidebar;
  float: left;
  background: $red;
}
 
.content {
  width: $sidebar;
  margin-left: $sidebar;
  background: $blue;
}

Funzioni (Mixin)

In SASS puoi creare qualcosa di simile alle funzioni:

@mixin blue-button {   
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
 
  &:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
}
 
.form-submit {
  @include blue-button;
}