Eine kleine Einführung in SASS

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

Transcript

1. SASS Eine kurze Einführung in und eine noch Kürzere in Compass Montag, 14. November 11
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, 2009 Montag, 14. November 11
3. Montag, 14. November 11
4. .box margin: 1em .entry-content border: 1px solid #f00 SASS Montag, 14. November 11
5. .box { margin: 1em; .entry-content { border: 1px solid #f00; } } SCSS Montag, 14. November 11
6. CSS 2.1 Montag, 14. November 11
7. CSS 3 Montag, 14. November 11
8. VARIABLEN & Co. CSS wird Programmiersprache Montag, 14. November 11
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. SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; CSS 8px; 0px; 8px; 2px; Montag, 14. November 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. 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. 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. 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. NESTING Vererbung & das Klä ern auf Bäume Montag, 14. November 11
16. SCSS .box { width: 60%; h2 { font-size: 24px; } } CSS .box { width: 60%; } .box h2 { font-size: 24px; } Montag, 14. November 11
17. SCSS .box { header, footer { background-color: #000; } } CSS .box header, .box footer { background-color: #000 } Montag, 14. November 11
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. 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. flickr.com/photos/sharynmorrow/ Montag, 14. November 11
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. 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. VORSICHT! Montag, 14. November 11
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. MIXINS Einen Gang höher Montag, 14. November 11
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. 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. 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. 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. Montag, 14. November 11
31. ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Projekt-Umgebung ★ Erweiterungen DAS GIBT ES FÜR’S GELD Montag, 14. November 11
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. 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. flickr.com/photos/runningdevine Montag, 14. November 11
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. JA, ABER… Montag, 14. November 11
37. FRAGEN? @dantz ad@vortrieb.net vortrieb.net Montag, 14. November 11
38. BONUS Montag, 14. November 11