Sass und Compass

1,166 views

Published on

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

No Downloads
Views
Total views
1,166
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×