Eine kleine Einführung in SASS

  • View
    107

  • Download
    2

Embed Size (px)

DESCRIPTION

Meine meine Slides zu Eine kleine Einfhrung in SASS und eine noch Kleinere in Compass auf dem Treffen der Drupal Usergroup Hamburg im November 2011

Transcript

  • 1. Eine kurze Einfhrung inSASSund eine noch Krzere in CompassMontag, 14. November 11

2. CSS zu kompilieren ist eine vllig bescheuerte Idee. Das braucht kein Mensch und wer es nutzt, schlgt auch Omas auf der Strae. Andreas Dantz, 2009Montag, 14. November 11 3. Montag, 14. November 11 4. SASS.boxmargin: 1em.entry-content border: 1px solid #f00Montag, 14. November 11 5. SCSS.box {margin: 1em;.entry-content {border: 1px solid #f00;}}Montag, 14. November 11 6. CSS 2.1Montag, 14. November 11 7. CSS 3Montag, 14. November 11 8. VARIABLEN & Co. CSS wird ProgrammierspracheMontag, 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 BumeMontag, 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. ickr.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 hherMontag, 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. DAS GIBT ES FRS GELD Alles, was SASS bietet Noch mehr Funktionen Mixin Bibliothek Projekt-Umgebung ErweiterungenMontag, 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. ickr.com/photos/runningdevineMontag, 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, ABERMontag, 14. November 11 37. FRAGEN?@dantzad@vortrieb.net vortrieb.netMontag, 14. November 11 38. BONUSMontag, 14. November 11