Sass & Compass (Barcamp Stuttgart 2012)

3,080 views

Published on

Session Slides vom Barcamp Stuttgart 2012 #bcs5

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

No Downloads
Views
Total views
3,080
On SlideShare
0
From Embeds
0
Number of Embeds
1,830
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sass & Compass (Barcamp Stuttgart 2012)

  1. 1. schöneres CSSmitSass & Compass
  2. 2. Sass
  3. 3. Install & Run$ gem install sass$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css
  4. 4. Basic Syntaxcss scss sass
  5. 5. Nesting SASS article border-top: 1px dashed #eee header margin-bottom: 15px header, section color: #eee CSS article { border-top: 1px dashed #eeeeee; } article header { margin-bottom: 15px; } article header, article section { color: #eeeeee; }
  6. 6. Parent Selector SASS article color: #f00 &:hover color: #00f .special & h1 font-size: 2em CSS article { color: red; } article:hover { color: blue; } .special article h1 { font-size: 2em; }
  7. 7. @media SASS #content margin: 0 1.5em @media screen and (min-width: 1280px) margin: 0 2.5em CSS #content { margin: 0 1.5em; } @media screen and (min-width: 1280px) { #content { margin: 0 2.5em; } }
  8. 8. Variablen SASS $link-color: #e78a15 $link-hover: #138a1e $link-size: 0.8em a color: $link-color font-size: $link-size &:hover color: $link-hover CSS a { color: #e78a15; font-size: 0.8em; } a:hover { color: #138a1e; }
  9. 9. Weiterverwendung mit @extend SASS .button background-color: #00f color: #fff padding: 2em 1.5em .button-delete @extend .button background-color: #f00 CSS .button, .button-delete { background-color: blue; color: white; padding: 2em 1.5em; } .button-delete { background-color: red; }
  10. 10. Vorlagen mit @mixin SASS @mixin hover-link text-decoration: none &:hover text-decoration: underline article a @include hover-link .nav a color: blue @include hover-link CSS article a { text-decoration: none; } article a:hover { text-decoration: underline; } .nav a { color: blue; text-decoration: none; } .nav a:hover { text-decoration: underline; }
  11. 11. Funktionen mit @mixin SASS @mixin border-radius($amount) border-radius: $amount -mox-border-radius: $amount -webkit-border-radius: $amount .alert @include border-radius(5px) CSS .alert { border-radius: 5px; -mox-border-radius: 5px; -webkit-border-radius: 5px; }
  12. 12. benannte Argumente mit @mixin SASS @mixin flash-message($bgcolor:red, $hovercolor:blue) background-color: $bgcolor &:hover background-color: $hovercolor .alertbox @include flash-message($hovercolor: green) CSS .alertbox { background-color: red; } .alertbox:hover { background-color: green; }
  13. 13. Import pages/ _user.sass screen.sass _variables.sass _grid.sass _typography.sass _phone.sass SASS /* screen.sass */ @import "variables" @import "grid" @import "grid", "typography" @media screen and (min-width: 480px) @import "phone" #user @import "pages/user"
  14. 14. etwas Mathematik SASSfont-size: 18px - 5pxwidth: 200px * 3Beispiel:$layout-space: 10px$sidebar-width: 250px$page-width: 960px#main width: $page-width - $sidebar-width - (2 * $layout-space) CSS#main { width: 690px; }
  15. 15. Mathematische Funktionenabs(-43) // => 43floor(3.9) // => 3ceil(3.2) // => 4round(2.8) // => 3percentage(13/25) // => 52%
  16. 16. Mehr ...- Bedingungen (@if, @else, @elseif)- Logische Operatoren (<, >, >=, <=, ==, !=)- Verknuepfungen (and, or)- Schleifen (@for, @while, @each)- Farb-Inspektoren (hue, saturation, lightness, ..)- Farb-Funktionen (invert, mix, grayscale, darken, ..)- eigene Funktionen (@function)...
  17. 17. Compass@mixin & @function Sammlung
  18. 18. Installation$ gem install compass$ compass create my_project$ cd my_project$ vim config.rb$ compass watchoder$ sass --compass --watch assets/sass:public/css
  19. 19. Cross Browser CSS3 Mixins● Appearance ● Filter● Background Clip ● Font Face● Background Origin ● Hyphenation● Background Size ● Images (Gradients)● Border Radius ● Inline Block● Box ● Opacity● Box Shadow ● CSS Regions● Box Sizing ● Text Shadow● Columns ● Transform ● Transition
  20. 20. Beispiel CSS3 Mixins SASS@import "compass".flash-message @include background(linear-gradient(#fff, #eee)) @include border-radius(5px) CSS.flash-message { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(#ffffff, #eeeeee); background: -moz-linear-gradient(#ffffff, #eeeeee); background: -o-linear-gradient(#ffffff, #eeeeee); background: linear-gradient(#ffffff, #eeeeee); -webkit- border-radius: 5px; -moz-border-radius: 5px; -ms- border-radius: 5px; -o-border-radius: 5px; border- radius: 5px;}
  21. 21. Layout HelperGrid Background Grid als Seitenhintergrund mithilfe CSS3 GradientsSticky Footer Footer am SeitenendeStretching Dimensionen eines Divs auf das Elternelement ausweiten
  22. 22. UtilitiesReset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...
  23. 23. Sprites SASS@import "compass"@import "social/*.png"@include all-social-sprites CSS.icons-sprite, .icons-facebook, .icons-flickr, .icons-twitter, .icons-xing { background: url(/images/icons-s2d05e1e0af.png) no-repeat; }.icons-facebook { background-position: 0 -48px; }.icons-flickr { background-position: 0 -16px; }.icons-twitter { background-position: 0 -32px; }.icons-xing { background-position: 0 0; }
  24. 24. Informations● Sass - sass-lang.com● Sass Ruby on Rails Implementation github.com/rails/sass-rails● Compass - compass-style.org● Noch mehr Infos ○ 35 Great Resources for Compass and Sass ○ Sass & Compass: The future of stylesheets now ○ css2sass converter
  25. 25. PersonalStefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier

×