Digital First: Loading

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 Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.