Spass mit Sass

  • 1,955 views
Uploaded on

Eine kleine Einführung in die CSS-Erweiterung Sass. …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,955
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Heiko Mamerow● Freelancer● Frontend-Entwicklung● 100% WordPressheikomamerow.de
  • 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. 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: VariablenSass 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: VerschachtelungSass 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 & 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. Noch viiiiiiiiiiiiiiiel mehr Möglichkeiten/Vorteile...http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  • 14. Vielen Dank! :-)