Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Spass mit Sass

2,563 views

Published on

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

  • Be the first to comment

Spass mit Sass

  1. 1. Spass mit SassEine kleine Einführung in die CSS-Erweiterung Sass.Und wie man sich das Leben damit leichter macht. ;-)WP MEETUP BERLIN18. Dezember 2012
  2. 2. Heiko Mamerow● Freelancer● Frontend-Entwicklung● 100% WordPressheikomamerow.de
  3. 3. SzenarioKurz 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: VariablenSass 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: VerschachtelungSass 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 & ArgumentsSass 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! :-)

×