SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
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?

Contenu connexe

Similaire à 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 #jd13chAlexander Schmidt
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
 
Multimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und CmsMultimedia In Lms (Moodle) Und Cms
Multimedia In Lms (Moodle) Und CmsAndreas 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 KarrierefrauenKai 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 2011Jens Grochtdreis
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan 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 13Kay Strobach
 

Similaire à 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?