Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Spass mit Sass

Nächste SlideShare
Wordcamp ber-2015-scss
Wordcamp ber-2015-scss
Wird geladen in …3
×

Hier ansehen

1 von 14
1 von 14

Spass mit Sass

Herunterladen, um offline zu lesen

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

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

Weitere Verwandte Inhalte

Spass mit Sass

  1. 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. 2. Heiko Mamerow ● Freelancer ● Frontend-Entwicklung ● 100% WordPress heikomamerow.de
  3. 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. 4. Hinter den Kulissen Twenty Twelve - 1727 Zeilen CSS-Code - 15 CSS-Regeln für die Link-Farbe: Suchen, Finden und Anpassen
  5. 5. Wie schön, wenn man das vereinfachen könnte... Take Sass, darling.
  6. 6. Szenario Twenty Twelve mit Sass $link-color: red; - Nur eine Variable für die Link-Farbe ändern
  7. 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. 8. Was ist Sass nicht? Sass ist keine Erweiterung der CSS-Syntax! Sass kann „nur“ CSS3-Syntax.
  9. 9. Vorteil 1: Variablen Sass CSS $link-color: red; a {color: $link-color;} a {color: red;} h1 {color: $link-color;} h1 {color: red;}
  10. 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. 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. 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. 13. Noch viiiiiiiiiiiiiiiel mehr Möglichkeiten/Vorteile... http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  14. 14. Vielen Dank! :-)

×