Wie du mit SASS schneller Designs in Code umwandelst

Wie du mit SASS schneller Designs in Code umwandelst
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.

Zuerst einmal: Was ist SASS eigentlich?

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.

Von Variablen und wie sie die Webentwicklung beschleunigen

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.

Media Queries und Breakpoints

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.

Mixins und was sie können

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

Mein Fazit

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)

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Artikel zum Thema:

loading
Nach oben