Das Dokument bietet eine Einführung in die CSS-Erweiterung SASS und zeigt, wie sie die Arbeit mit CSS vereinfachen kann, insbesondere durch die Verwendung von Variablen, Operatoren, Verschachtelung und Mixins. Ein Beispiel verdeutlicht, wie einfach Farbanpassungen und andere Stile mit SASS durchgeführt werden können, anstatt umfangreiche CSS-Dateien manuell ändern zu müssen. SASS ist eine Metasprache für CSS, die die Möglichkeiten zur Erstellung von CSS-Regeln erheblich erweitert.

1. Spass mit Sass
Eine kleine Einführung in die CSS-Erweiterung Sass.
Und wie man sich das Leben damit leichter macht. ;-)
WP MEETUP BERLIN
18. Dezember 2012

2. Heiko Mamerow
● Freelancer
● Frontend-Entwicklung
● 100% WordPress
heikomamerow.de

3. Szenario
Kurz vor dem Relaunch:
Kunde: Ach ändern Sie bitte noch die
Linkfarbe auf der neuen Website!
Dem Chef gefällt Rot als Link-Farbe
viel besser.
Entwickler: Aaaaaaaaaaaaaaaaahhh!!!!!!!!

4. Hinter den Kulissen
Twenty Twelve
- 1727 Zeilen CSS-Code
- 15 CSS-Regeln für die
Link-Farbe: Suchen,
Finden und Anpassen

5. Wie schön, wenn man das
vereinfachen könnte...
Take Sass,
darling.

6. Szenario
Twenty Twelve mit Sass
$link-color: red; - Nur eine Variable für die
Link-Farbe ändern

7. Was ist Sass?
Sass = Syntactically Awesome Stylesheets
!
Wesenheit: Metasprache für CSS
Funktion: CSS-Erweiterung
Erweitert die Möglichkeiten zur
Erstellung von CSS-Regeln in
einer Datei.

8. Was ist Sass nicht?
Sass ist keine Erweiterung der CSS-Syntax!
Sass kann „nur“ CSS3-Syntax.

9. Vorteil 1: Variablen
Sass CSS
$link-color: red;
a {color: $link-color;} a {color: red;}
h1 {color: $link-color;} h1 {color: red;}

10. Vorteil 2: Operatoren (und
Funktionen)
Sass CSS
$font-size: 16px;
p {font-size: $font-size;} p {font-size: 16px;}
p.footer {font-size: $font-size - 3;} p.footer {font-size: 13px;}
h1 {font-size: $font-size * 2;} h1 {font-size: 32px;}

11. Vorteil 3: Verschachtelung
Sass CSS
.navigation {background: red; .navigation {background: red;}
li {display: inline; .navigation li {display: inline;}
a {display: block;}}} .navigation li a {display: block;}

12. Vorteil 4: Mixins & Arguments
Sass CSS
@mixin rounded-border ($radius: 10px) { #navbar li {
border-radius: $radius; border-radius: 10px;
-moz-border-radius: $radius; -moz-border-radius: 10px;
-webkit-border-radius: $radius;} -webkit-border-radius: 10px;}
#footer {
#navbar li {@include rounded-border;} border-radius: 15px;
#footer {@include rounded-border(15px);} -moz-border-radius: 15px;
#sidebar {@include rounded-border;} -webkit-border-radius: 15px;}
#sidebar {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}

13. Noch viiiiiiiiiiiiiiiel mehr
Möglichkeiten/Vorteile...
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

14. Vielen Dank!
:-)