Sass einfuehrung-t3camphh

1,321 views

Published on

Einführung in die CSS-Entwicklung mit SASS/SCSS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,321
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sass einfuehrung-t3camphh

  1. 1. SASSStrukturiertes CSS mit SASS und sassify
  2. 2. <head> <link rel=“... <link rel=“... CSS HTML CSSCSS über <link> einfügen
  3. 3. <html>...<div style=“color: #abc; padding: 2px“> ‘T !HTML O N D Inline-CSS
  4. 4. <div id=“header“> #header { ... } <ul class=“menu“> #header ul.menu { ... } <li>Item 1</li> #header ul.menu li { ... } <li><a href=“#“>Item 2</a></li> #header ul.menu li a { ... } </ul> li a { ... }</div><div id=“footer“> <ul><li> CSS <a href=“#>Impressum</a> </li></ul></div>HTML Selektoren
  5. 5. Schwächen von CSS
  6. 6. Einheitliche Formatierung?
  7. 7. Wiederholung von Eigenschaften
  8. 8. Farben und Abstände sind verteilt
  9. 9. Lange Selektoren
  10. 10. Importe sind langsam!
  11. 11. SASSbzw. SCSS
  12. 12. CompilerSCSS SCSS CSS SCSS wird in CSS übersetzt
  13. 13. CSS SCSSCSS kann übernommen werden!
  14. 14. Benutzung
  15. 15. sass --watch imports.scssÄnderungen überwachen
  16. 16. CSS Erweiterungen
  17. 17. #header { #header { ... ...} ul.menu {#header ul.menu li a { ... ... li {} ...#header ul.menu li { a{ ... refactor ...} }li a { } ... li a {} ...#header ul.menu { } ...} CSS SCSS Nesting
  18. 18. #header ul.menu li a { #header { color: #000; ul.menu {} li {#header ul.menu li a:hover { a{ color: #ccc; color: #000;} &:hover { color: #ccc; refactor } } } CSS SCSS Selektor Referenzen
  19. 19. $grey: #c7c7c7; $border-size: solid 1px; $border: $border-size $grey;#menu { #menu { ... ... border-left: solid 1px #c7c7c7; border-left: $border; border-top: solid 1px #c7c7c7; border-top: $border; border-right: solid 1px #c7c7c7; border-right: $border;} refactor }#rootline { #rootline { ... ... background-color: #c7c7c7; background-color: $grey;} }#content { #content { ... ... border-left: solid 1px #c7c7c7; border-left: $border; border-top: solid 1px #c7c7c7; border-top: $border; border-right: solid 1px #c7c7c7; border-right: $border;} CSS } SCSS Variablen
  20. 20. $total-width: 600px; $sidebar-width: 100px; $spacing: 20px;#content { #content { width: 500px; width: $total-width - $sidebar-width; padding: 40px; padding: $spacing * 2;} }#sidebar { refactor #sidebar { width: 100px; width: $sidebar-width; margin-left: 20px; margin-left: $spacing;} } CSS SCSS Berechnungen
  21. 21. $color: #777777; #content { compile background-color: #444444; }#content { background-color: darken($color, 20%); h2 {} color: #f6f6f6; }h2 { color: lighten($color, 50%);} SCSS Funktionen (vordefiniert)
  22. 22. Funktionen http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmladjust_hue(color, degrees) alpha(color) percentage(value)complement(color) blue(color) unit(number)darken(color, amount) green(color) unitless(number)desaturate(color, amount) hue(color)grayscale(color) red(color) quote(str)lighten(color, amount) opacity(color) unquote(str)mix(color1, color2, weight) lightness(color)opacify(color, amount) saturation(color)saturate(color, amount)transparentize(color, amount) abs(value) ceil(value)hsl(hue, saturation, lightness) floor(value)hsla(hue, saturation, lightness, round(value)alpha)rgb(red, green, blue) comparable(number1, number2)rgba(red, green, blue, alpha) type_of(obj)rgba(color, alpha)
  23. 23. @mixin list-style-none { #inhalt .text_container ul { list-style-image: none; list-style-image: none; list-style-position: outside; list-style-position: outside; list-style-type: none; list-style-type: none;} text-align: left;#inhalt { margin: 0px 0px 15px 15px; .text_container ul { padding: 0px 0px 0px 0px; } @include list-style-none; #inhalt .text_container ul li { compile margin: 0px 0px 15px 15px; list-style-image: none; padding: 0px 0px 0px 0px; list-style-position: outside; li { list-style-type: none; @include list-style-none; background-image: ...; background-image: ...; background-repeat: no-repeat; margin: 0px 0px 0px 0px; text-align: left; padding: 0px 0px 0px 15px; margin: 0px 0px 0px 0px; } padding: 0px 0px 0px 15px; } }} SCSS CSS Mixins
  24. 24. @mixin rounded-border($width, $color, $radius) { border-width: $width; border-style: solid; border-color: $color; border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius;}div.menu { @include rounded-border(1px, #770000, 10px); width: 300px;}div.sidebar { @include rounded-border(2px, #000000, 5px);} SCSSMixins mit Argumenten
  25. 25. $color = #cc7700; #inhalt { compile background-color: #663c00; }@import "a.scss";@import "b.scss"; h2 { SCSS color: #cc7700; } #inhalt { background-color: darken($color, 20%); } a.scss h2 { color: $color; } b.scss CSS Echte Imports
  26. 26. .error { .error, .serious-error { border: 1px #f00; compile border: 1px #f00; background-color: #fdd; background-color: #fdd;} }.serious-error { @extend .error; .serious-error { border-width: 3px; border-width: 3px;} } SCSS CSS Styles erweitern
  27. 27. .error { .error, .serious-error { border: 1px #f00; compile border: 1px #f00; background-color: #fdd; background-color: #fdd;} }.error-icon { background-image: url("error.png"); .error-icon, .serious-error {} background-image: url("error.png");.serious-error { } @extend .error; @extend .error-icon; .serious-error { border-width: 3px; border-width: 3px;} } SCSS CSS Styles erweitern (mehrfach)
  28. 28. $type: business; p{p{ compile color: green; } @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }} SCSS CSS Kontrollstrukturen / if
  29. 29. @for $i from 1 through 3 { h1 { h#{$i} { compile font-size: 0.8em; } font-size: 1em - (0.2 * $i); } h2 {} font-size: 0.6em; } h3 { font-size: 0.4em; } SCSS CSS Kontrollstrukturen / for
  30. 30. /* /* * Mehrzeiliges CSS Kommentar compile * Mehrzeiliges CSS Kommentar */ */body { color: black; } body { color: black; }// Einzeiliges, internes Kommentara { color: green } a{ color: green; } SCSS CSS Kommentare
  31. 31. Windows
  32. 32. Installation■ RubyInstaller (http://www.ruby-lang.org/de/downloads/)■ Sass Gem installieren: gem install sass --pre
  33. 33. Debugging
  34. 34. sass -g imports.scss > imports.css FireSass Firebug Extension
  35. 35. sass -iBerechnungen testen
  36. 36. sassify Demo

×