SCSS (SASS) snel integreren in Drupal met de module Sassy

SASS/SCSS zijn al lang de standaard geworden voor het schrijven van CSS-code. Als je ze nog niet gebruikt voor je websites, is het tijd om daar eens over na te denken. Je kunt SCSS heel snel integreren met behulp van de module Sassy, zelfs op shared hosting, omdat de compilatie van CSS-bestanden wordt uitgevoerd met behulp van een PHP-bibliotheek.

Laten we beginnen. Ik heb een schone Drupal-installatie met het Zen-thema. We moeten de module Sassy installeren:

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

De Sassy-module heeft de Prepro-module nodig voor de CSS-compilatie:

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

Installeer ook de module Libraries API, die we nodig hebben om de bibliotheek voor Sassy aan te sluiten:

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

Daarnaast hebben we de bibliotheek PHPSass nodig, die SCSS-code omzet naar CSS. Download de nieuwste versie als ZIP-bestand:

https://github.com/richthegeek/phpsass

Kopieer de bibliotheek naar de map sites/all/libraries/phpsass, zodat de bestanden als volgt zijn geplaatst:
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php
enzovoort.

Schakel vervolgens onze modules in. Nu kunnen we een SCSS-bestand toevoegen. Mijn subthema heet “sitemade”, dus ik open het bestand sitemade.info en voeg daar de CSS-regel toe:

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

Zoals je ziet, hoef je alleen de extensie .scss te gebruiken — verder worden de bestanden op dezelfde manier toegevoegd als gewone CSS-bestanden. Maak nu het bestand css/styles.scss aan en wis de cache. Klaar! Het bestand wordt nu ingeladen en werkt.

Als je fouten tegenkomt, controleer dan of de map files schrijfrechten (777) heeft, en of er geen fouten staan in het statusrapport. Stel gerust vragen in de reacties. Verderop bekijken we de Drupal-instellingen voor het werken met SCSS en de mogelijkheden van SCSS zelf.

Werking van de Sassy-module

Nadat we het SCSS-bestand hebben toegevoegd, genereert de module Sassy CSS-code uit SCSS, en de module Prepro slaat deze code standaard op in de map sites/default/files/prepro.

Om te voorkomen dat CSS telkens opnieuw wordt gegenereerd bij elke paginalaad (wat niet wenselijk is op een live website), kun je caching uitschakelen op de configuratiepagina van de module Prepro:

/admin/config/media/prepro

Standaard is caching uitgeschakeld, waardoor de CSS bij elke pagina opnieuw wordt gegenereerd. Dit gebeurt vrij snel, zodat je je SCSS gemakkelijk kunt aanpassen en direct het resultaat kunt zien.

Mozilla Firefox Firebug + FireSass

Het is erg handig om Firebug samen met de extensie FireSass te gebruiken. Hiermee kun je zien op welke regel van het oorspronkelijke SCSS-bestand een bepaalde CSS-regel zich bevindt:

Als je deze extensie niet installeert, zie je alleen de regel in het reeds gecompileerde CSS-bestand.

Voor deze extensie moet je de volgende opties aanvinken op de instellingenpagina van de module Prepro:
/admin/config/media/prepro

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

Mogelijkheden van SCSS

Je kunt alle mogelijkheden van SASS/SCSS lezen op de officiële website:

http://sass-lang.com/

De belangrijkste eigenschap van SCSS is de geneste structuur.

Geneste structuur

Je kunt code schrijven zonder herhaaldelijk de ouderselectors te hoeven typen, bijvoorbeeld zo:

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

Deze code is sneller te schrijven en beter leesbaar dan dit:

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

Stel nu dat we stijlen willen toevoegen voor een <a>-element binnen <li>, en in dat <a>-element zit nog een <span>. Dit kunnen we eenvoudig doen met 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;
    }
  }
}

Je kunt ook :hover toevoegen via hiërarchie en de selector &:

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

Dit wordt gecompileerd tot:

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

Variabelen

Een andere geweldige functie zijn variabelen. Je kunt de kleurenschema’s van je site als variabelen definiëren en ze vervolgens hergebruiken:

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

Functies (Mixin)

In SASS kun je ook iets vergelijkbaars met functies gebruiken — zogenaamde mixins:

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