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.
Upcoming SlideShare
Lenguaj script
Next
Download to read offline and view in fullscreen.

1

Share

Spass mit Sass

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Jan. 28, 2014

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

Views

Total views

2,920

On Slideshare

0

From embeds

0

Number of embeds

1,558

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×