Einfache Designalternativen mit Sass

• 27 September 2013

Während der Genese eines Designs kommt man immer wieder an Punkte, an denen man Alternativen austesten möchte. Arbeitet man mit Sass, so kann man sich die Arbeit dahingehend erleichtern.

Die einfache Mechanik arbeitet mit einer Kombination aus Variablen und if-Direktiven. Nehmen wir ein Beispiel: ich möchte in einem Design ausprobieren, ob die Seite besser aussieht, wenn die Inhalte keine optische Grenze oder wenn sie eine Seitenoptik haben.

In meiner Variablendatei setze ich folgende Variable:

$seitenoptik: true;

In meiner _layout.scss schreibe ich dann Folgendes:

html {
    padding: 0; 
    background-color: #efefef;
}
// Das umfasst die gesamte Seite
.ym-wrapper {
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto; 
    background: #fff; 
    clear: both;
}

// Hier kommt die Alternative
@if $seitenoptik == true {
    html, body {background-color: #efefef;}
    .ym-wrapper {
        border: 1px solid #cecece;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        padding: 20px;
        margin: 10px auto;
    }
}

Ändere ich in meiner Variablendatei den Wert der Variablen $seitenoptik auf false, bekomme ich wieder eine seitenfüllende Optik.

Diesen Ansatz kann man sowohl mit kleinen, wie mit großen Designänderungen fahren. Der nächste logische Schritt wäre natürlich, mit einer Variablen zu entscheiden, welche Dateien importiert werden. Doch leider sperrt sich Sass hier. Folgendes Vorgehen endet in einem Fehler:

// In der _vars.scss
$mainnavtype: type1;

// In der styles.scss
@if $mainnavtype == type1 {
    @import "partials/mainnav1";
} @else if $mainnavtype == type2 {
    @import "partials/mainnav2";
} @else {
    @import "partials/mainnav";
}
// Führt zu einem Fehler:
// Import directives may not be used within control directives or mixins.

Import-Anweisungen dürfen leider nicht innerhalb von Kontrollstrukturen oder Mixins genutzt werden. Dirk Jesse behilft sich bei YAML deshalb mit einem klugen Trick: er umfasst einfach den Inhalt einer kompletten Datei mit einer if-Anweisung. Die Datei wird normal importiert, der Inhalt aber nur gelesen, wenn die if-Anweisung auch zutrifft. So kann man über die Veränderung einer oder einiger weniger Variablen unterschiedliche Designs ausprobieren.

• ← Previous
  Linkfutter 28
• Next →
  Linkfutter 29 - Farbtools