Schnelle Integration von SCSS (SASS) in Drupal mit dem Modul Sassy

SASS/SCSS sind längst zum Standard für das Schreiben von CSS-Code geworden. Wenn Sie sie noch nicht für Ihre Websites verwenden, ist es an der Zeit, darüber nachzudenken. Sie können SCSS sehr schnell mit dem Modul Sassy integrieren, auch auf Shared-Hosting, da die CSS-Dateien mittels PHP-Bibliothek kompiliert werden.

Fangen wir an. Ich habe ein frisches Drupal mit dem Zen-Theme. Wir müssen das Modul Sassy installieren:

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

Das Sassy-Modul benötigt das Modul Prepro für die CSS-Kompilierung:

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

Außerdem installieren Sie das Modul Libraries API, das wir benötigen, um die Bibliothek für Sassy anzubinden:

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

Sie benötigen außerdem die PHPSass-Bibliothek, die den SCSS-Code in CSS umwandelt. Laden Sie die neueste Version "Download ZIP":

https://github.com/richthegeek/phpsass

Kopieren Sie die Bibliothek in den Ordner sites/all/libraries/phpsass, sodass die Dateien liegen wie:
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php und so weiter.

Aktivieren Sie die Module. Jetzt können Sie eine SCSS-Datei hinzufügen. Mein Subtheme heißt sitemade, deshalb öffne ich die Datei sitemade.info und füge die CSS-Datei hinzu:

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

Wie Sie sehen, reicht es, die Dateiendung .scss zu verwenden, und die Dateien werden wie gewohnt eingebunden. Erstellen Sie nun die Datei css/styles.scss und leeren Sie den Cache. Fertig! Die Datei wird eingebunden und funktioniert.

Falls Fehler auftreten, prüfen Sie die Schreibrechte (777) für den Ordner files und ob im Statusbericht Fehler angezeigt werden, und stellen Sie Fragen in den Kommentaren. Wir betrachten später die Drupal-Einstellungen für SCSS und die Möglichkeiten von SCSS.

Funktionsweise des Moduls Sassy

Nachdem wir die SCSS-Datei eingebunden haben, generiert das Modul Sassy CSS-Code daraus, und das Modul Prepro speichert diesen Standardmäßig im Ordner sites/default/files/prepro.

Damit CSS nicht bei jedem Seitenaufruf neu generiert wird (für Live-Seiten), deaktivieren Sie das Caching in den Einstellungen des Prepro-Moduls:

/admin/config/media/prepro

Standardmäßig ist das Caching deaktiviert und CSS wird bei jedem Seitenaufruf neu generiert. Das passiert sehr schnell, sodass Sie SCSS schnell anpassen und die Ergebnisse sehen können.

Mozilla Firefox Firebug + FireSass

Sehr praktisch sind Firebug und die Erweiterung FireSass. Damit sehen Sie, an welcher Zeile der ursprünglichen SCSS-Datei sich der CSS-Code befindet:

Ohne die Erweiterung sehen Sie nur die Zeile im kompilierten CSS.

Für die Erweiterung aktivieren Sie auf der Seite der Prepro-Modul-Einstellungen folgende Optionen:
/admin/config/media/prepro

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

Möglichkeiten von SCSS

Alle Möglichkeiten von SASS/SCSS finden Sie auf der offiziellen Website:

http://sass-lang.com/

Die Hauptbesonderheit von SCSS ist die Verschachtelung.

Verschachtelung

Sie können Code schreiben, ohne die Elternklassen zu wiederholen, zum Beispiel so:

#menu-1 {
  margin-top: 20px;

  ul {
    margin-left: 0px;

    li {
      width: 100px;
      display: inline-block;
    }

    .li-1 {
      background: red;
    }
  }
}

Dieser Code ist schneller zu schreiben und besser lesbar als dieser:

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

Stellen Sie sich vor, Sie müssen noch Styles für den <a>-Tag innerhalb von <li> schreiben, und darin ist ein <span>-Tag. Das können Sie mit der Hierarchie ganz einfach schreiben:

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

Sie können auch :hover mit Hierarchie und dem Selektor & hinzufügen:

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

Das wird kompiliert zu:

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

Variablen

Eine weitere tolle Funktion sind Variablen. Sie können Farbschemata in Variablen definieren und diese dann einfach verwenden:

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

Funktionen (Mixin)

Etwas Ähnliches wie Funktionen kann man in SASS definieren:

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