SlideShare ist ein Scribd-Unternehmen logo
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
Heiko Mamerow
●   Freelancer
●   Frontend-Entwicklung
●   100% WordPress


heikomamerow.de
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!!!!!!!!
Hinter den Kulissen

          Twenty Twelve
          - 1727 Zeilen CSS-Code
          - 15 CSS-Regeln für die
            Link-Farbe: Suchen,
            Finden und Anpassen
Wie schön, wenn man das
 vereinfachen könnte...



Take Sass,
 darling.
Szenario


                      Twenty Twelve mit Sass
$link-color: red;     - Nur eine Variable für die
                        Link-Farbe ändern
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.
Was ist Sass nicht?



Sass ist keine Erweiterung der CSS-Syntax!

      Sass kann „nur“ CSS3-Syntax.
Vorteil 1: Variablen
Sass                              CSS
$link-color: red;

a {color: $link-color;}           a {color: red;}

h1 {color: $link-color;}          h1 {color: red;}
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;}
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;}
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;}
Noch viiiiiiiiiiiiiiiel mehr
      Möglichkeiten/Vorteile...



http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Vielen Dank!
     :-)

Weitere ähnliche Inhalte

Andere mochten auch

Oferta Hotel Insua Semana Santa 2013 en Galicia
Oferta Hotel Insua Semana Santa 2013 en GaliciaOferta Hotel Insua Semana Santa 2013 en Galicia
Oferta Hotel Insua Semana Santa 2013 en Galicia
Enrique Pérez Sampedro
 
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
Piper Verlag
 
revista digital segunda parte
revista digital segunda parterevista digital segunda parte
revista digital segunda parte
jorgerangelortega
 
Reseña de presentacion
Reseña de presentacionReseña de presentacion
Reseña de presentacion
Rafael182
 
Teorías para: "La Resolución de Conflicto"
Teorías para: "La  Resolución de  Conflicto" Teorías para: "La  Resolución de  Conflicto"
Teorías para: "La Resolución de Conflicto"
Eliana Carolina Durán Aguilar
 
Suma
SumaSuma
Suma
61665788
 
Vortrag an der Universität Bremen zum Berufsfeld PR
Vortrag an der Universität Bremen zum Berufsfeld PRVortrag an der Universität Bremen zum Berufsfeld PR
Vortrag an der Universität Bremen zum Berufsfeld PR
Scheidtweiler PR
 
Fallstudie GIZ Transwater SADC
Fallstudie GIZ Transwater SADCFallstudie GIZ Transwater SADC
Fallstudie GIZ Transwater SADC
geocoop
 
Presentation1
Presentation1Presentation1
Presentation1
sophbennett1234
 
Presentacion Hotel Restaurante Insua en Costa da Morte, Galicia
Presentacion Hotel Restaurante Insua en Costa da Morte, GaliciaPresentacion Hotel Restaurante Insua en Costa da Morte, Galicia
Presentacion Hotel Restaurante Insua en Costa da Morte, Galicia
Enrique Pérez Sampedro
 
Merkblatt
MerkblattMerkblatt
Merkblatt
Bootsfahrschule
 
Taller práctico de word gestion administrativa
Taller  práctico  de  word gestion administrativaTaller  práctico  de  word gestion administrativa
Taller práctico de word gestion administrativa
gloriazapata30
 
Unidad 1 Tema 1
Unidad 1 Tema 1Unidad 1 Tema 1
Unidad 1 Tema 1
DURLEINYS
 
Diferencia entre creatividad,
Diferencia entre creatividad,Diferencia entre creatividad,
Diferencia entre creatividad,
melidita10
 
Presentacion redes sociales
Presentacion redes socialesPresentacion redes sociales
Presentacion redes sociales
mechaves
 
Como hacer una encuesta en blogger
Como hacer una encuesta en bloggerComo hacer una encuesta en blogger
Como hacer una encuesta en blogger
Azariax Aderith
 
Oxid ecommerce analysis with Piwik
Oxid ecommerce analysis with PiwikOxid ecommerce analysis with Piwik
Oxid ecommerce analysis with Piwik
piwik
 

Andere mochten auch (20)

Oferta Hotel Insua Semana Santa 2013 en Galicia
Oferta Hotel Insua Semana Santa 2013 en GaliciaOferta Hotel Insua Semana Santa 2013 en Galicia
Oferta Hotel Insua Semana Santa 2013 en Galicia
 
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
»Seien Sie gefälligst still, wenn ich Sie unterbreche!« Die bösesten Chefspru...
 
revista digital segunda parte
revista digital segunda parterevista digital segunda parte
revista digital segunda parte
 
Reseña de presentacion
Reseña de presentacionReseña de presentacion
Reseña de presentacion
 
Site
SiteSite
Site
 
Freizetaktivitaeten
FreizetaktivitaetenFreizetaktivitaeten
Freizetaktivitaeten
 
Teorías para: "La Resolución de Conflicto"
Teorías para: "La  Resolución de  Conflicto" Teorías para: "La  Resolución de  Conflicto"
Teorías para: "La Resolución de Conflicto"
 
Suma
SumaSuma
Suma
 
Vortrag an der Universität Bremen zum Berufsfeld PR
Vortrag an der Universität Bremen zum Berufsfeld PRVortrag an der Universität Bremen zum Berufsfeld PR
Vortrag an der Universität Bremen zum Berufsfeld PR
 
Fallstudie GIZ Transwater SADC
Fallstudie GIZ Transwater SADCFallstudie GIZ Transwater SADC
Fallstudie GIZ Transwater SADC
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentacion Hotel Restaurante Insua en Costa da Morte, Galicia
Presentacion Hotel Restaurante Insua en Costa da Morte, GaliciaPresentacion Hotel Restaurante Insua en Costa da Morte, Galicia
Presentacion Hotel Restaurante Insua en Costa da Morte, Galicia
 
Merkblatt
MerkblattMerkblatt
Merkblatt
 
Taller práctico de word gestion administrativa
Taller  práctico  de  word gestion administrativaTaller  práctico  de  word gestion administrativa
Taller práctico de word gestion administrativa
 
Unidad 1 Tema 1
Unidad 1 Tema 1Unidad 1 Tema 1
Unidad 1 Tema 1
 
Diferencia entre creatividad,
Diferencia entre creatividad,Diferencia entre creatividad,
Diferencia entre creatividad,
 
Presentacion redes sociales
Presentacion redes socialesPresentacion redes sociales
Presentacion redes sociales
 
Como hacer una encuesta en blogger
Como hacer una encuesta en bloggerComo hacer una encuesta en blogger
Como hacer una encuesta en blogger
 
Wax Resist Art
Wax Resist ArtWax Resist Art
Wax Resist Art
 
Oxid ecommerce analysis with Piwik
Oxid ecommerce analysis with PiwikOxid ecommerce analysis with Piwik
Oxid ecommerce analysis with Piwik
 

Ähnlich wie Spass mit Sass

Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
Sass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für FortgeschritteneSass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für Fortgeschrittene
Wolfgang Wagner
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
djesse
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
Hans Mittendorfer
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
Eine kurze Einführung in SASS
Eine kurze Einführung in SASSEine kurze Einführung in SASS
Eine kurze Einführung in SASS
Nico Schober
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
Kai Laborenz
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Peter Müller
 

Ähnlich wie Spass mit Sass (14)

Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Sass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für FortgeschritteneSass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für Fortgeschrittene
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Eine kurze Einführung in SASS
Eine kurze Einführung in SASSEine kurze Einführung in SASS
Eine kurze Einführung in SASS
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
 

Spass mit Sass

  • 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. Heiko Mamerow ● Freelancer ● Frontend-Entwicklung ● 100% WordPress heikomamerow.de
  • 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. 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: Variablen Sass 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: 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. 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. Noch viiiiiiiiiiiiiiiel mehr Möglichkeiten/Vorteile... http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html