Spass mit Sass

2,171 views
2,141 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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,171
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×