0
schöneres               CSSmitSass & Compass
Sass
Install & Run$ gem install sass$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css
Basic Syntaxcss       scss   sass
Nesting                                                SASS article     border-top: 1px dashed #eee     header         mar...
Parent Selector                                           SASS article     color: #f00     &:hover         color: #00f    ...
@media                                             SASS #content     margin: 0 1.5em     @media screen and (min-width: 128...
Variablen                                           SASS $link-color: #e78a15 $link-hover: #138a1e $link-size: 0.8em a    ...
Weiterverwendung mit @extend                                                SASS .button     background-color: #00f     co...
Vorlagen mit @mixin                                                   SASS @mixin hover-link   text-decoration: none   &:h...
Funktionen mit @mixin                                      SASS @mixin border-radius($amount)     border-radius: $amount  ...
benannte Argumente mit @mixin                                                  SASS @mixin flash-message($bgcolor:red, $ho...
Import pages/     _user.sass screen.sass _variables.sass _grid.sass _typography.sass _phone.sass                          ...
etwas Mathematik                                                   SASSfont-size: 18px - 5pxwidth: 200px * 3Beispiel:$layo...
Mathematische Funktionenabs(-43)            // => 43floor(3.9)          // => 3ceil(3.2)           // => 4round(2.8)      ...
Mehr ...- Bedingungen (@if, @else, @elseif)- Logische Operatoren (<, >, >=, <=, ==, !=)- Verknuepfungen (and, or)- Schleif...
Compass@mixin & @function Sammlung
Installation$ gem install compass$   compass create my_project$   cd my_project$   vim config.rb$   compass watchoder$ sas...
Cross Browser CSS3 Mixins●   Appearance          ●   Filter●   Background Clip     ●   Font Face●   Background Origin   ● ...
Beispiel CSS3 Mixins                                                  SASS@import "compass".flash-message  @include backgr...
Layout HelperGrid Background  Grid als Seitenhintergrund mithilfe CSS3 GradientsSticky Footer  Footer am SeitenendeStretch...
UtilitiesReset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...
Sprites                                                    SASS@import "compass"@import "social/*.png"@include all-social-...
Informations● Sass - sass-lang.com● Sass Ruby on Rails Implementation  github.com/rails/sass-rails● Compass - compass-styl...
PersonalStefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier
Sass & Compass (Barcamp Stuttgart 2012)
Upcoming SlideShare
Loading in...5
×

Sass & Compass (Barcamp Stuttgart 2012)

2,139

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
2,139
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×