SlideShare ist ein Scribd-Unternehmen logo
Eine kurze Einführung 
Nico Schober 
für die Hacker School Bremen 
12.10.2014 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
HTML & CSS 
ist keine 
Programmierung 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico. 
schober
CSS IST NETT, 
ABER... 
● Es fehlen ein paar Features 
● Viel Wiederholung 
● Schwierig zu pflegen / warten 
● Alles wiederholt sich sich 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
SCSS 
ul{ 
padding: 0; 
li{ 
color: blue; 
a.link{ 
text-decoration: none; 
color: black; 
} 
} 
a{ 
color: #C0FFEE; 
} 
} 
CSS 
ul{ 
padding: 0; } 
ul li { 
color: blue; } 
ul li a.link{ 
text-decoration: none; 
color: black; } 
ul a { 
color: #C0FFEE; } 
VERSCHACHTELUNG 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
SCSS 
a.mein-link { 
&:hover{ text-decoration: 
underline; } 
&:before, &:after{ 
content: "—"; 
} 
&.active{ 
color: #f00; 
&:hover{ 
color: black; 
} 
} 
} 
CSS 
a.mein-link:hover{ text-decoration: 
underline; } 
a.mein-link:before, a:hover{ 
content: ""; } 
a.mein-link.active{ color: #f00; } 
a.mein-link.active:hover{ color: 
black; } 
VERSCHACHTELUNG & OPERATOREN 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
VARIABLEN 
SCSS 
$font-main: "Fira Sans", Helvetica, "Comic Sans MS"; 
$font-head: "Droid Serif", Prestige, sans-serif; 
$font-mono: Courier, mono; 
$font-size-body: 67,5%; 
$font-size-large: 32px; 
$font-size-main: 1em; 
$prim1: #C0FFEE; 
$prim2: #F00BAA; 
$prim3: #B00B1E; 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
MEDIA QUERIES 
SCSS 
.modul{ 
width: 100%; 
padding: 1em; 
@media screen and (min-width: 480px){ 
width: 50%; 
padding: 0; 
float: left; 
} 
@media screen and (min-width: 480px){ 
width: 30%; 
padding: 2em; 
} 
} 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
MEDIA QUERIES 
CSS 
.modul { 
width: 100%; 
padding: 1em; 
} @media screen and (min-width: 480px) { 
.modul { 
width: 50%; 
padding: 0; 
float: left; 
} 
} @media screen and (min-width: 480px) { 
.modul { 
width: 30%; 
padding: 2em; 
} 
} 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
SCSS 
@mixin inline-block{ 
display: inline; 
*zoom: 1; 
display: inline-block; 
} 
.mein-element{ 
width: 300px; 
@include inline-block; 
} 
.mein-anderes-element{ 
width: 200px; 
@include inline-block; 
} 
CSS 
.mein-element{ 
width: 300px; 
display: inline; 
*zoom: 1; 
display: inline-block; 
} 
.mein-anderes-element{ 
width: 200px; 
display: inline; 
*zoom: 1; 
display: inline-block; 
} 
MIXINS 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
● CSS Klassen lassen sich verschachteln 
● Werte können in $variablen gespeichert werden 
● Wiederkehrende Elemente lassen sich mit @mixin's 
einfügen 
● Ein @mixin kann auch mit Parametern aufgerufen 
werden 
● Es gibt Mixin-Bibliotheken wie Compass oder 
Bourbon, die bereits viele Mixins mitbringen 
● Funktionen können viel Arbeit ersparen... 
● ... und für uns rechnen 
● Vererbung ist super 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
AUF ZU 
http://codepen.io/schobiwan/pen/wjsxo/ 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober
http://sass-lang.com/guide 
http://sassmeister.com/ 
http://codepen.io/ 
http://bestwebsite.gallery/ 
http://www.cssdesignawards.com/ 
http://unmatchedstyle.com/ 
http://css-tricks.com/ 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico.schober 
FRAGEN?

Weitere ähnliche Inhalte

Ähnlich wie Eine kurze Einführung in SASS

Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
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
 
Multimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und CmsMultimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und Cms
Andreas Hofer
 
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
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
Kai Laborenz
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
Jens Grochtdreis
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
Kay Strobach
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
Heiko Mamerow
 

Ähnlich wie Eine kurze Einführung in SASS (9)

Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Multimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und CmsMultimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und Cms
 
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)
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
 

Eine kurze Einführung in SASS

  • 1. Eine kurze Einführung Nico Schober für die Hacker School Bremen 12.10.2014 info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 2. HTML & CSS ist keine Programmierung info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico. schober
  • 3. CSS IST NETT, ABER... ● Es fehlen ein paar Features ● Viel Wiederholung ● Schwierig zu pflegen / warten ● Alles wiederholt sich sich info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 4. SCSS ul{ padding: 0; li{ color: blue; a.link{ text-decoration: none; color: black; } } a{ color: #C0FFEE; } } CSS ul{ padding: 0; } ul li { color: blue; } ul li a.link{ text-decoration: none; color: black; } ul a { color: #C0FFEE; } VERSCHACHTELUNG info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 5. SCSS a.mein-link { &:hover{ text-decoration: underline; } &:before, &:after{ content: "—"; } &.active{ color: #f00; &:hover{ color: black; } } } CSS a.mein-link:hover{ text-decoration: underline; } a.mein-link:before, a:hover{ content: ""; } a.mein-link.active{ color: #f00; } a.mein-link.active:hover{ color: black; } VERSCHACHTELUNG & OPERATOREN info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 6. VARIABLEN SCSS $font-main: "Fira Sans", Helvetica, "Comic Sans MS"; $font-head: "Droid Serif", Prestige, sans-serif; $font-mono: Courier, mono; $font-size-body: 67,5%; $font-size-large: 32px; $font-size-main: 1em; $prim1: #C0FFEE; $prim2: #F00BAA; $prim3: #B00B1E; info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 7. MEDIA QUERIES SCSS .modul{ width: 100%; padding: 1em; @media screen and (min-width: 480px){ width: 50%; padding: 0; float: left; } @media screen and (min-width: 480px){ width: 30%; padding: 2em; } } info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 8. MEDIA QUERIES CSS .modul { width: 100%; padding: 1em; } @media screen and (min-width: 480px) { .modul { width: 50%; padding: 0; float: left; } } @media screen and (min-width: 480px) { .modul { width: 30%; padding: 2em; } } info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 9. SCSS @mixin inline-block{ display: inline; *zoom: 1; display: inline-block; } .mein-element{ width: 300px; @include inline-block; } .mein-anderes-element{ width: 200px; @include inline-block; } CSS .mein-element{ width: 300px; display: inline; *zoom: 1; display: inline-block; } .mein-anderes-element{ width: 200px; display: inline; *zoom: 1; display: inline-block; } MIXINS info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 10. ● CSS Klassen lassen sich verschachteln ● Werte können in $variablen gespeichert werden ● Wiederkehrende Elemente lassen sich mit @mixin's einfügen ● Ein @mixin kann auch mit Parametern aufgerufen werden ● Es gibt Mixin-Bibliotheken wie Compass oder Bourbon, die bereits viele Mixins mitbringen ● Funktionen können viel Arbeit ersparen... ● ... und für uns rechnen ● Vererbung ist super info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 11. AUF ZU http://codepen.io/schobiwan/pen/wjsxo/ info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  • 12. http://sass-lang.com/guide http://sassmeister.com/ http://codepen.io/ http://bestwebsite.gallery/ http://www.cssdesignawards.com/ http://unmatchedstyle.com/ http://css-tricks.com/ info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober FRAGEN?