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.

Sass und Compass

1.202 Aufrufe

Veröffentlicht am

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

Sass und Compass

  1. 1. k o m mu n ik at ion & sys temeSass & Compass Eine kurze Vorstellung
  2. 2. ko mm u n i k ati o n & s ys te m e Sass. Syntactically Awesome Stylesheets Einstieg SVN – ©2011 Michael van Engelshoven
  3. 3. ko mm u n i k ati o n & s ys te m e • Ein „CSS Compiler“Sass. • Erweitert CSS mit dem was uns fehlt • Verbessert Wart- und Lesbarkeit • Bietet zwei verschiedene Syntaxen Einstieg SVN – ©2011 Michael van Engelshoven
  4. 4. ko mm u n i k ati o n & s ys te m e Installation und Benutzung $ gem update --system $ gem install sass $ mv style.css style.scss $ sass --watch style.scss:style.css Einstieg SVN – ©2011 Michael van Engelshoven
  5. 5. ko mm u n i k ati o n & s ys te m e 2 Syntaxen Sassy CSS (.scss) Indented Syntax (.sass) .content-navigation { .content-navigation border-color: #3bbfce; border-color: #3bbfce color: #2ca2af; color: #2ca2af } .border .border { padding: 8px padding: 8px; margin: 8px margin: 8px; border-color: #3bbfce border-color: #3bbfce; } Sass & Compass – ©2011 Michael van Engelshoven
  6. 6. ko mm u n i k ati o n & s ys te m e Variablen scss css $blue: #3bbfce; .content-navigation { $margin: 16px; border-color: #3bbfce; } .content-navigation { border-color: $blue; .border { } padding: 8px; margin: 8px; .border { border-color: #3bbfce; padding: $margin / 2; } margin: $margin / 2; border-color: $blue; } Sass & Compass – ©2011 Michael van Engelshoven
  7. 7. ko mm u n i k ati o n & s ys te m e Verschachtelungen scss css table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right; } } li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } } } Sass & Compass – ©2011 Michael van Engelshoven
  8. 8. ko mm u n i k ati o n & s ys te m e Vererbung scss css .error { .error, .badError { border: 1px #f00; border: 1px #f00; background: #fdd; background: #fdd; } } .error.intrusion { font-size: 1.3em; .error.intrusion, font-weight: bold; .badError.intrusion { } font-size: 1.3em; font-weight: bold; .badError { } @extend .error; border-width: 3px; .badError { border-width: 3px; } } Sass & Compass – ©2011 Michael van Engelshoven
  9. 9. ko mm u n i k ati o n & s ys te m e Mixins & Funktionen scss css @mixin table-base { #data { th { color: #2ca2af; text-align: center; } Font-weight: bold; #data th { } text-align: center; td, th {padding: 2px} font-weight: bold; } } #data td, #data th { #data { padding: 2px; color: darken(#3bbfce, 9%); } @include table-base; } Sass & Compass – ©2011 Michael van Engelshoven
  10. 10. ko mm u n i k ati o n & s ys te m e Kontrollstrukturen scss css @for $i from 1 through 3 { .item-1 { .item-#{$i} { width: 2em; width: 2em * $i; } } .item-2 { } width: 4em; } .item-3 { width: 6em; } Sass & Compass – ©2011 Michael van Engelshoven
  11. 11. ko mm u n i k ati o n & s ys te m e An open source CSS Authoring Framework Sass & Compass – ©2011 Michael van Engelshoven
  12. 12. ko mm u n i k ati o n & s ys te m e • Basiert auf SASS • Bringt eine Menge Mixins mit • Erweitert SASS mit einer Plugin-Schnittstelle • Definierte Konfiguration eines Projektes Einstieg SVN – ©2011 Michael van Engelshoven
  13. 13. ko mm u n i k ati o n & s ys te m e Installation und Benutzung $ gem update --system $ gem install compass $ compass create <myproject> --using blueprint $ compass --watch Einstieg SVN – ©2011 Michael van Engelshoven
  14. 14. ko mm u n i k ati o n & s ys te m e Konfiguration: config.rb # Get the directory that this configuration file exists in dir = File.dirname(__FILE__) # Compass configurations sass_path = dir css_path = File.join(dir, "..", "public", "styles") environment = :production output_style = :compressed Einstieg SVN – ©2011 Michael van Engelshoven
  15. 15. ko mm u n i k ati o n & s ys te m e Einzeiler: Runde Ecken scss css .content-box { .content-box { -webkit-border-radius: 4px; @include border-radius(4px); -moz-border-radius: 4px; } -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } Sass & Compass – ©2011 Michael van Engelshoven
  16. 16. ko mm u n i k ati o n & s ys te m e Compass Module Imports • CSS Reset @import "compass/reset" • Sticky Footer @import "compass/layout/sticky-footer" @include sticky-footer(54px, "#my-root", "#my-root-footer", "#my- footer") Einstieg SVN – ©2011 Michael van Engelshoven
  17. 17. ko mm u n i k ati o n & s ys te m e Sprites generieren dateien css public/images/icon/edit.png .icon-edit, .icon-delete { public/images/icon/delete.png background: url(/images/icon-s34f.png); background-repeat: no-repeat; } .icon-delete { scss } background-position: 0 0; .icon-edit { @import "icon/*.png"; background-position: 0 -32px; @include all-icon-sprites; } Sass & Compass – ©2011 Michael van Engelshoven
  18. 18. ko mm u n i k ati o n & s ys te m e Viel Spass! Sass & Compass – ©2011 Michael van Engelshoven
  19. 19. ko mm u n i k ati o n & s ys te m e Slides online ansehen http://slidesha.re/nVbwel Sass & Compass – ©2011 Michael van Engelshoven
  20. 20. ko mm u n i k ati o n & s ys te m e Quellen • SASS – Syntactically Awesome Stylesheets http://sass-lang.com/ • Compass is an open-source CSS Authoring Framework http://compass-style.org/ • Using Compass and Sass for CSS in your Next Project http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ Sass & Compass – ©2011 Michael van Engelshoven

×