Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

568 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

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?

×