Eine kleine Einführung in die CSS-Erweiterung Sass. Und wie man sich das Leben damit leichter macht. ;-) Präsentation beim WP Meetup Berlin am 18. Dezember 2012

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!
:-)