Eine kurze Einführung in                    SASS                    und eine noch Kürzere in CompassMontag, 14. November 11
„CSS zu kompilieren ist eine völlig               bescheuerte Idee. Das braucht kein               Mensch und wer es nutzt...
Montag, 14. November 11
SASS                          .box                            margin: 1em                            .entry-content       ...
SCSS                          .box {                            margin: 1em;                            .entry-content {  ...
CSS 2.1Montag, 14. November 11
CSS 3Montag, 14. November 11
VARIABLEN & Co.       CSS wird ProgrammierspracheMontag, 14. November 11
SCSS       $maincolor: #f00;       $compcolor: #0ff;       a { color: $maincolor; }       a:hover,       a:focus { color: ...
SCSS       4px         +      4px;       4px         -      4px;       4px         *      2;       4px         /      2;  ...
SCSS       $defaultmargin: 20px;       .box {         border: 1px solid #000;         margin: $defaultmargin / 2;         ...
SCSS       round(4.3);       ceil(4.2);       floor(4.6);       abs(-12);       percentage(26/50);                        ...
SCSS       $maincolor: #f00;       a { color: $maincolor; }       a:hover,       a:focus { color: lighten($maincolor, 30%)...
SCSS       adjust-hue($color, $degrees)       lighten($color, $amount)       darken($color, $amount)       saturate($color...
NESTING   Vererbung &                           das Klä ern auf BäumeMontag, 14. November 11
SCSS       .box {         width: 60%;         h2 { font-size: 24px; }       }                                      CSS    ...
SCSS       .box {         header, footer { background-color: #000; }       }                                              ...
SCSS       a {         color: #f00;         text-decoration: none;         &:hover { text-decoration: underline }       } ...
SCSS       button {         background: linear-gradient(#fff, #eee };         .no-cssgradients & { background: #eee };    ...
flickr.com/photos/sharynmorrow/Montag, 14. November 11
SCSS       .message {         background-color: #eee;         border: 1px solid #ccc;         padding: 1em;       }       ...
CSS       .message, .error {         background-color: #eee;         border: 1px solid #ccc;         padding: 1em;       }...
VORSICHT!Montag, 14. November 11
CSS       #wrapper header#header .meta-nav nav ul li a span,       .container #sidebar .region-sidebar .views-view-       ...
MIXINS                           Einen Gang höherMontag, 14. November 11
SCSS       @mixin linkeffect {         color: #f00;         &:hover { color: darken(#f00, 30%); }       }       nav a { @i...
SCSS       @mixin border-radius($radius) {         -webkit-border-radius: $radius;         -moz-border-radius: $radius;   ...
SCSS       @mixin linkcolor($link:black, $hover:red) {         color: $link;         &:hover { color: $hover; }       }   ...
SCSS       @mixin linkcolor($dark: false) {         @if $dark == true {             color: black;             &:hover { co...
Montag, 14. November 11
DAS GIBT ES FÜR’S GELD              ★ Alles, was SASS bietet              ★ Noch mehr Funktionen              ★ Mixin Bibl...
SCSS       header {         background: image-url(logo.jpg);         h1 {           width: image-width(logo.jpg);         ...
SCSS       .box {         @include border-radius(8px);         @include background(linear-gradient(#000, #333));       }  ...
flickr.com/photos/runningdevineMontag, 14. November 11
SCSS       @import "icon/*.png";       @include all-icon-sprites($dimensions:true);                                       ...
JA, ABER…Montag, 14. November 11
FRAGEN?  @dantz                            ad@vortrieb.net                               vortrieb.netMontag, 14. November 11
BONUSMontag, 14. November 11
Upcoming SlideShare
Loading in...5
×

Eine kleine Einführung in SASS

1,261

Published on

Meine meine Slides zu „Eine kleine Einführung in SASS und eine noch Kleinere in Compass“ auf dem Treffen der Drupal Usergroup Hamburg im November 2011

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,261
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Eine kleine Einführung in SASS

  1. 1. Eine kurze Einführung in SASS und eine noch Kürzere in CompassMontag, 14. November 11
  2. 2. „CSS zu kompilieren ist eine völlig bescheuerte Idee. Das braucht kein Mensch und wer es nutzt, schlägt auch Omas auf der Straße.“ — Andreas Dantz, 2009Montag, 14. November 11
  3. 3. Montag, 14. November 11
  4. 4. SASS .box margin: 1em .entry-content border: 1px solid #f00Montag, 14. November 11
  5. 5. SCSS .box { margin: 1em; .entry-content { border: 1px solid #f00; } }Montag, 14. November 11
  6. 6. CSS 2.1Montag, 14. November 11
  7. 7. CSS 3Montag, 14. November 11
  8. 8. VARIABLEN & Co. CSS wird ProgrammierspracheMontag, 14. November 11
  9. 9. SCSS $maincolor: #f00; $compcolor: #0ff; a { color: $maincolor; } a:hover, a:focus { color: $compcolor; } CSS a { color: #f00; } a:hover, a:focus { color: #0ff; }Montag, 14. November 11
  10. 10. SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; CSS 8px; 0px; 8px; 2px;Montag, 14. November 11
  11. 11. SCSS $defaultmargin: 20px; .box { border: 1px solid #000; margin: $defaultmargin / 2; padding: $defaultmargin / 2 - 1px; } CSS .box { border: 1px solid #000; margin: 10px; padding: 9px; }Montag, 14. November 11
  12. 12. SCSS round(4.3); ceil(4.2); floor(4.6); abs(-12); percentage(26/50); CSS 4; 5; 4; 12; 52%;Montag, 14. November 11
  13. 13. SCSS $maincolor: #f00; a { color: $maincolor; } a:hover, a:focus { color: lighten($maincolor, 30%); } CSS a { color: #f00; } a:hover, a:focus { color: #f99; }Montag, 14. November 11
  14. 14. SCSS adjust-hue($color, $degrees) lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) grayscale($color) complement($color) invert($color)Montag, 14. November 11
  15. 15. NESTING Vererbung & das Klä ern auf BäumeMontag, 14. November 11
  16. 16. SCSS .box { width: 60%; h2 { font-size: 24px; } } CSS .box { width: 60%; } .box h2 { font-size: 24px; }Montag, 14. November 11
  17. 17. SCSS .box { header, footer { background-color: #000; } } CSS .box header, .box footer { background-color: #000 }Montag, 14. November 11
  18. 18. SCSS a { color: #f00; text-decoration: none; &:hover { text-decoration: underline } } CSS a { color: #f00; text-decoration:none; } a:hover { text-decoration: underline; }Montag, 14. November 11
  19. 19. SCSS button { background: linear-gradient(#fff, #eee }; .no-cssgradients & { background: #eee }; } CSS button { # code mit dem Verlauf } .no-cssgradients button { background: #eee; }Montag, 14. November 11
  20. 20. flickr.com/photos/sharynmorrow/Montag, 14. November 11
  21. 21. SCSS .message { background-color: #eee; border: 1px solid #ccc; padding: 1em; } .message p:last-child { margin-bottom: 0; } .error { @extend .message; background-color: lighten(#f00, 60%); border: 1px solid #f00; }Montag, 14. November 11
  22. 22. CSS .message, .error { background-color: #eee; border: 1px solid #ccc; padding: 1em; } .message p:last-child, .error p:last-child { margin-bottom: 0; } .error { background-color: white; border: 1px solid #f00; }Montag, 14. November 11
  23. 23. VORSICHT!Montag, 14. November 11
  24. 24. CSS #wrapper header#header .meta-nav nav ul li a span, .container #sidebar .region-sidebar .views-view- generic .item span { color #f00; }Montag, 14. November 11
  25. 25. MIXINS Einen Gang höherMontag, 14. November 11
  26. 26. SCSS @mixin linkeffect { color: #f00; &:hover { color: darken(#f00, 30%); } } nav a { @include linkeffect; } CSS nav a { color: #f00; } nav a:hover { color: #660000; }Montag, 14. November 11
  27. 27. SCSS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); } CSS .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }Montag, 14. November 11
  28. 28. SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow ); } CSS a { color: black; } a:hover { color: yellow; }Montag, 14. November 11
  29. 29. SCSS @mixin linkcolor($dark: false) { @if $dark == true { color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } } } a { @include linkcolor(); } a.alt { @include linkcolor(true); } CSS a { color: white; } a:hover { color: #ccc; } a.alt { color: black; } a.alt:hover { color: blue; }Montag, 14. November 11
  30. 30. Montag, 14. November 11
  31. 31. DAS GIBT ES FÜR’S GELD ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Projekt-Umgebung ★ ErweiterungenMontag, 14. November 11
  32. 32. SCSS header { background: image-url(logo.jpg); h1 { width: image-width(logo.jpg); height: image-height(logo.jpg); } } CSS header { background: url(/images/logo.jpg?1321202172); } header h1 { width: 346px; height: 400px; }Montag, 14. November 11
  33. 33. SCSS .box { @include border-radius(8px); @include background(linear-gradient(#000, #333)); } CSS .box { -moz-border-radius: 8px;-webkit-border-radius: 8px;-ms-border-radius: 8px; border-radius: 8px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #333333)); background: -webkit-linear-gradient(#000000, #333333); background: -moz-linear-gradient(#000000, #333333); background: linear-gradient(#000000, #333333); }Montag, 14. November 11
  34. 34. flickr.com/photos/runningdevineMontag, 14. November 11
  35. 35. SCSS @import "icon/*.png"; @include all-icon-sprites($dimensions:true); CSS .icon-sprite, .icon-minus { background: url(/images/icon-sd557c6037f.png) no-repeat; } .icon-minus { background-position: 0 0; height: 7px; width: 24px; }Montag, 14. November 11
  36. 36. JA, ABER…Montag, 14. November 11
  37. 37. FRAGEN? @dantz ad@vortrieb.net vortrieb.netMontag, 14. November 11
  38. 38. BONUSMontag, 14. November 11
  1. A particular slide catching your eye?

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

×