Connexion rapide de SCSS (SASS) dans Drupal grâce au module Sassy

SASS/SCSS est depuis longtemps devenu un standard pour écrire du code CSS. Si vous ne les utilisez pas encore pour vos sites, il est temps d’y penser. On peut très rapidement connecter SCSS grâce au module Sassy, et cela fonctionne même sur un hébergement mutualisé, car la compilation des fichiers CSS se fait via une bibliothèque PHP.

Commençons. J’ai un Drupal propre avec le thème Zen activé. Il faut installer le module Sassy :

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

Le module Sassy nécessite le module Prepro pour la compilation CSS :

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

Installez aussi le module Libraries API, qui est nécessaire pour connecter la bibliothèque pour Sassy :

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

Il faut également la bibliothèque PHPSass, qui traduit le code SCSS en CSS. Téléchargez la dernière version stable via "Download ZIP" :

https://github.com/richthegeek/phpsass

Copiez cette bibliothèque dans le dossier sites/all/libraries/phpsass, de sorte que les fichiers se trouvent ainsi :
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php
etc.

Activez les modules. Vous pouvez maintenant ajouter un fichier SCSS. Mon sous-thème s’appelle sitemade, donc j’ouvre le fichier sitemade.info et j’ajoute simplement le fichier CSS :

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

Comme vous pouvez le voir, il suffit d’écrire l’extension .scss, et les fichiers sont inclus normalement. Créez maintenant le fichier css/styles.scss et videz le cache. Voilà ! Le fichier doit être chargé et fonctionner.

Si vous rencontrez des erreurs, vérifiez que les permissions 777 sont attribuées au dossier files, qu’il n’y a pas d’erreurs dans le Rapport d’état et posez vos questions dans les commentaires. Ensuite, nous verrons les réglages Drupal pour travailler avec SCSS et les fonctionnalités de SCSS.

Fonctionnement du module Sassy

Après avoir connecté le fichier SCSS, le module Sassy génère le code CSS à partir du SCSS, et le module Prepro sauvegarde ce code dans les fichiers, par défaut dans le dossier sites/default/files/prepro.

Pour éviter que le CSS ne soit régénéré à chaque ouverture d’une nouvelle page (sur un site en production), il faut désactiver le cache dans la page de configuration du module Prepro :

/admin/config/media/prepro

Par défaut, le cache est désactivé, donc le CSS sera régénéré à chaque page. Cela se fait assez rapidement, ce qui permet de modifier rapidement le SCSS et voir les résultats.

Mozilla Firefox Firebug + FireSass

Il est très pratique d’utiliser Firebug et son extension FireSass. Cela permet de voir à quelle ligne du fichier SCSS source correspond le code affiché :

Si vous n’installez pas cette extension, vous verrez seulement la ligne dans le fichier CSS compilé.

Pour l’extension, activez les cases à cocher dans la page des réglages du module Prepro :
/admin/config/media/prepro

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

Fonctionnalités de SCSS

Vous pouvez lire toutes les fonctionnalités de SASS/SCSS sur le site officiel :

http://sass-lang.com/

La principale particularité de SCSS est la négation.

Imbrication

Vous pourrez écrire du code sans dupliquer les classes parentes, par exemple ainsi :

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

Ce code est plus rapide à écrire et plus lisible que celui-ci :

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

Imaginez maintenant que vous devez ajouter des styles pour la balise <a> dans <li>, et que dans <a> il y a aussi une balise <span>. Tout cela vous pouvez très facilement l’écrire grâce à la hiérarchie :

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

Vous pouvez aussi ajouter :hover grâce à la hiérarchie et au sélecteur & :

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

Cela sera compilé en :

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

Variables

Une autre fonctionnalité remarquable est l’utilisation des variables. Vous pouvez définir la palette de couleurs du site dans des variables, puis simplement les utiliser :

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

Fonctions (Mixin)

On peut définir quelque chose de similaire à une fonction dans SASS :

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