Sass einfuehrung-t3camphh

Embed Size (px)

DESCRIPTION

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

Text of Sass einfuehrung-t3camphh

  • 1. SASSStrukturiertes CSS mit SASS und sassify

2. einfgen 3. ...

T !HTMLO ND Inline-CSS 4.
#header { ... }
  • #header ul.menu { ... }
  • Item 1 #header ul.menu li { ... }
  • Item 2 #header ul.menu li a { ... }
li a { ... }
  • CSSImpressum
HTMLSelektoren 5. Schwchen von CSS 6. Einheitliche Formatierung? 7. Wiederholung von Eigenschaften 8. Farben und Abstnde sind verteilt 9. Lange Selektoren 10. Importe sind langsam! 11. SASSbzw. SCSS 12. CompilerSCSSSCSSCSS SCSS wird in CSS bersetzt 13. CSSSCSSCSS kann bernommen werden! 14. Benutzung 15. sass --watch imports.scssnderungen berwachen 16. CSS Erweiterungen 17. #header { #header {... ...} ul.menu {#header ul.menu li a {...... li {} ...#header ul.menu li {a{...refactor ...} }li a {}... li a {} ...#header ul.menu { }...} CSSSCSS Nesting 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} }} CSSSCSSSelektor Referenzen 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}SCSSVariablen 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;}}CSSSCSS Berechnungen 21. $color: #777777; #content { compilebackground-color: #444444; }#content {background-color: darken($color, 20%); h2 {} color: #f6f6f6; }h2 {color: lighten($color, 50%);} SCSSFunktionen (vordefiniert) 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. @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 {compilemargin: 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; }}}SCSSCSSMixins 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. $color = #cc7700;#inhalt { compilebackground-color: #663c00; }@import "a.scss";@import "b.scss";h2 { SCSS color: #cc7700; }#inhalt {background-color: darken($color, 20%);}a.scssh2 {color: $color;}b.scss CSS Echte Imports 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. .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;} } SCSSCSSStyles erweitern (mehrfach) 28. $type: business; p{p{ compilecolor: green; }@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}}SCSSCSSKontrollstrukturen / if 29. @for $i from 1 through 3 {h1 {h#{$i} {compilefont-size: 0.8em; }font-size: 1em - (0.2 * $i);} h2 {}font-size: 0.6em; }h3 { font-size: 0.4em; } SCSSCSS Kontrollstrukturen / for 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. Windows 32. Installation RubyInstaller (http://www.ruby-lang.org/de/downloads/) Sass Gem installieren:gem install sass --pre 33. Debugging 34. sass -g imports.scss > imports.cssFireSass Firebug Extension 35. sass -iBerechnungen testen 36. sassify Demo