Eine kurze Einführung 
Nico Schober 
für die Hacker School Bremen 
12.10.2014 
info@nicoschober.com 
https://twitter.com/s...
HTML & CSS 
ist keine 
Programmierung 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com/nico. 
s...
CSS IST NETT, 
ABER... 
● Es fehlen ein paar Features 
● Viel Wiederholung 
● Schwierig zu pflegen / warten 
● Alles wiede...
SCSS 
ul{ 
padding: 0; 
li{ 
color: blue; 
a.link{ 
text-decoration: none; 
color: black; 
} 
} 
a{ 
color: #C0FFEE; 
} 
}...
SCSS 
a.mein-link { 
&:hover{ text-decoration: 
underline; } 
&:before, &:after{ 
content: "—"; 
} 
&.active{ 
color: #f00...
VARIABLEN 
SCSS 
$font-main: "Fira Sans", Helvetica, "Comic Sans MS"; 
$font-head: "Droid Serif", Prestige, sans-serif; 
$...
MEDIA QUERIES 
SCSS 
.modul{ 
width: 100%; 
padding: 1em; 
@media screen and (min-width: 480px){ 
width: 50%; 
padding: 0;...
MEDIA QUERIES 
CSS 
.modul { 
width: 100%; 
padding: 1em; 
} @media screen and (min-width: 480px) { 
.modul { 
width: 50%;...
SCSS 
@mixin inline-block{ 
display: inline; 
*zoom: 1; 
display: inline-block; 
} 
.mein-element{ 
width: 300px; 
@includ...
● CSS Klassen lassen sich verschachteln 
● Werte können in $variablen gespeichert werden 
● Wiederkehrende Elemente lassen...
AUF ZU 
http://codepen.io/schobiwan/pen/wjsxo/ 
info@nicoschober.com 
https://twitter.com/schobi 
https://www.facebook.com...
http://sass-lang.com/guide 
http://sassmeister.com/ 
http://codepen.io/ 
http://bestwebsite.gallery/ 
http://www.cssdesign...
Nächste SlideShare
Wird geladen in …5
×

Eine kurze Einführung in SASS

500 Aufrufe

Veröffentlicht am

Eine kurze Einführung in SASS für die #hackerschool14 in Bremen

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
500
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Eine kurze Einführung in SASS

  1. 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. 2. HTML & CSS ist keine Programmierung info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico. schober
  3. 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. 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. 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. 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. 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. 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. 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. 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. 11. AUF ZU http://codepen.io/schobiwan/pen/wjsxo/ info@nicoschober.com https://twitter.com/schobi https://www.facebook.com/nico.schober
  12. 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?

×