Wie du mit SASS schneller Designs in Code umwandelst

SASS ist der Superheld in der Webentwickler-Welt. Keine meterlangen Codes, keine umständliche Suche in "fremden" Codes bei Änderungswünschen – sondern einfaches und strukturiertes Schreiben von Styles. Dank SASS lassen sich Webseiten schneller entwickeln und Anpassungen am bestehenden Design gehen im Handumdrehen.

Kein Wunder also, dass heute kaum ein Entwickler auf dieses Tool noch verzichten möchte. Und so funktioniert's.

SASS (Syntactically Awesome Stylesheet) ist der beste Freund des Webentwicklers. Dank dem Prozess wird das Erstellen von CSS-Stylesheets enorm vereinfacht – und damit das Umwandeln von Designs in Code. Durch die Verwendung von Variablen, Media Queries, Breakpoints und Mixins erspart man sich stundenlanges Hämmern in die Tasten und etliche Zeilen Code.

Jeder Webentwickler kennt es: Der Designer kommt und möchte spontan die Hintergrundfarben der gesamten Webseite und allen Unterseiten ändern. Das heißt übersetzt: Jede einzelne Style-Definition durchgehen und die Farben anpassen – oder ich verwende SASS und Variablen. Für mich definitiv die bessere Lösung.

Und das sieht dann so aus:

 /*Ohne Verwendung von SASS*/

.start-page{
    background-color: #555555;
}
.blog{
    background-color: #555555;
}
.contact-page{
    background-color: #555555;
}

/*Mit Verwendung von SASS*/

$bg-color: #555555

.start-page{
    background-color: $bg-color;
}
.blog{
    background-color: $bg-color;
}
.contact-page{
    background-color: $bg-color;

}

Die Variablen können nun einfach geändert werden und schon ist die Hintergrundfarbe der gesamten Website angepasst.

Wer den Begriff „Responsive Design“ kennt, der hat sicher auch schon von Media Queries und Breakpoints gehört. Breakpoints definieren eine gewisse Fensterbreite in Pixeln; sei es das Browserfenster am Desktop, Tablet oder am Smartphone. Definiert werden diese Breakpoints ganz einfach über Variablen:

/* Breakpoints */
$tablet: 1024px;
$smartphone: 480px;
}

Sind die Variablen definiert, kommen Media Queries ins Spiel. Das heißt, du kannst nun das Styling der Webseite anpassen – aber erst ab einer gewissen Pixelbreite! Denn hierfür wurden die Breakpoints definiert.

Wie das genau aussieht:

.header{
    background-color: #555555;

    @media all and(max-width: $tablet){
        background-color: #D3D3D3;
    }
}

Hier wird die Hintergrundfarbe des Headers bei der Verwendung eines Tablets von #555555 auf #D3D3D3 geändert – beziehungsweise wenn das Browserfenster der Größe eines Tablets entspricht.

Ein Mixin ist eine wiederverwendbare Gruppe von CSS-Deklarationen. Es können auch Parameter mit Default-Werten mitgegeben werden, um das Mixin flexibler zu gestalten. Gerne und gut werden Mixins für Browser-Präfixe verwendet (-webkit, -moz, usw.) – wie beispielsweise bei der Definition eines "Border-Radius". Im Beispiel ist der Default-Wert des Radius auf 5px gestellt und wird dann beim Inkludieren des Mixin mit 10px überschrieben.

Ein Beispiel:

/* Mixin */
@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

/* Verwendung */
.box { @include border-radius(10px); }

Ein Web-Leben ohne SASS? Undenkbar. Mit keinem anderen Programm lassen sich Designs so einfach und schnell umsetzen und anpassen. Extra Bonus: Selbst der aufkeimende Groll auf den Web Designer bei laufenden Änderungswünschen verfliegt nahezu.

(Textquelle: sass-lang.com, lesscss.de)