Drupal 7: Verwendung von SCSS/SASS

SCSS/SASS ist eine Erleichterung für jeden Entwickler, man hat die Möglichkeit Elemente ineinander zu verschachteln und so den Code deutlich lesbarer zu gestalten. Des Weiteren werden seitens SCSS/SASS Schleifen, Variablen, Funktionen und vieles mehr unterstützt. Für die Integration in Drupal 7 werden folgende Module benötigt:

• Sassy
• Prepro
• PHPSass

Man folgt nach Entpacken der Module den Anweisungen der Readme im Sassy Modul. Sobald dies erledigt ist, kann man beginnen im eigenen Theme scss-Dateien anzulegen. Diese werden wie jede andere Datei in der theme.info Datei hinterlegt:

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

Nun geht es ans Schreiben der SCSS-Datei. Dieses ist relativ simpel und nahezu identisch zu CSS, jedoch mit einigen wesentliche Vorteilen, hier ein kleines Beispiel mit Verschachtelung und einer Schleife:

div.view {
  .node {
    position: static;
    display: none;
  }

  .coordinates {
    position: absolute;
    width: 32px;
    height: 36px;
    background: url("../images/marker.png") no-repeat;

    @for $i from 1 through 4 {
      &-#{$i} {
        background: url("../images/marker-#{$i}.png") no-repeat;
      }
    }
  }
}

Das Ergebnis sieht dann folgendermaßen aus:

div.view .node {
  position: static;
  display: none;
}

div.view .coordinates {
  position: absolute;
  width: 32px;
  height: 36px;
  background: url(../images/marker.png) no-repeat;
}

div.view .coordinates-1 {
  background: url(../images/marker-1.png) no-repeat; }

div.view .coordinates-2 {
  background: url(../images/marker-2.png) no-repeat;
}
      
div.view .coordinates-3 {
  background: url(../images/marker-3.png) no-repeat;
}

div.view .coordinates-4 {
  background: url(../images/marker-4.png) no-repeat;
}

Alle Möglichkeiten müssen hier nicht erklärt werden, da sie alle in der Dokumentation von SCSS/SASS wunderbar beschrieben sind.