Your SlideShare is downloading. ×
Frontend-Entwicklung mit SASS & Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Frontend-Entwicklung mit SASS & Compass

1,007
views

Published on

Die Slides zu meiner Session auf dem Drupalcamp Essen 2012 zur Frontendentwicklung mit SASS und Compass.

Die Slides zu meiner Session auf dem Drupalcamp Essen 2012 zur Frontendentwicklung mit SASS und Compass.

Published in: Technology, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,007
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SASSMontag, 27. Februar 12 & Compass
  • 2. Andreas Dantz Designer & Frontend-Entwickler bei Vortrieb in Bremen. @dantz moin@dantz.me vortrieb.netMontag, 27. Februar 12
  • 3. „CSS zu kompilieren ist eine bescheuerte Idee. Das ist völlig unnötig, produziert keinen guten Code und wer es nutzt, schlägt auch Omas auf der Straße.“ Andreas DantzMontag, 27. Februar 12
  • 4. Montag, 27. Februar 12
  • 5. CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }Montag, 27. Februar 12
  • 6. SASS .box margin: 1em .content border: 1px solid #f00Montag, 27. Februar 12
  • 7. SCSS .box { margin: 1em .content { border: 1px solid #f00 } }Montag, 27. Februar 12
  • 8. CSS 2.1Montag, 27. Februar 12
  • 9. CSS 3Montag, 27. Februar 12
  • 10. Variablen & Co. CSS wird ProgrammierspracheMontag, 27. Februar 12
  • 11. SCSS $main-color: #f00; $comp-color: #0ff; a { color: $main-color; } a:hover, a:focus { color: $comp-color; } a { color: #f00; } a:hover, CSS a:focus { color: #0ff; }Montag, 27. Februar 12
  • 12. SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; 8px; 0px; CSS 8px; 2px;Montag, 27. Februar 12
  • 13. $baseline: 16px; SCSS $border-width: 1px; .box { border: $border-width solid #000; margin: $baseline / 2; padding: $baseline / 2 - $border-width; } .box { border: 1px solid #000; CSS margin: 8px; padding: 7px; }Montag, 27. Februar 12
  • 14. round(4.3); SCSS ceil(4.2); floor(4.6); abs(-12); percentage(26/50); 4; 5; CSS 4; 12; 52%;Montag, 27. Februar 12
  • 15. $maincolor: #f00; SCSS a { color: $maincolor; } a:hover, a:focus { color: lighten($maincolor, 30%); } a { color: #f00; } a:hover, CSS a:focus { color: #f99; }Montag, 27. Februar 12
  • 16. SCSS adjust-hue($color, $degrees) lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) grayscale($color) complement($color) invert($color)Montag, 27. Februar 12
  • 17. Nesting Erbschaften und das spielen in BäumenMontag, 27. Februar 12
  • 18. .box { SCSS width: 60%; h2 { font-size: 24px; } } .box { width: 60%; CSS } .box h2 { font-size: 24px; }Montag, 27. Februar 12
  • 19. article { SCSS header, footer { background-color: #000; } } article header, article footer { background-color: #000 CSS }Montag, 27. Februar 12
  • 20. a { SCSS color: #f00; text-decoration: none; &:hover { text-decoration: underline } } a { color: #f00; CSS text-decoration: none; } a:hover { text-decoration: underline; }Montag, 27. Februar 12
  • 21. SCSS button { background: linear-gradient(#fff, #eee }; .no-cssgradients & { background: #eee }; } button { # code mit dem Verlauf CSS } .no-cssgradients button { background: #eee; }Montag, 27. Februar 12
  • 22. flickr.com/photos/sharynmorrow/Montag, 27. Februar 12
  • 23. 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, 27. Februar 12
  • 24. 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, 27. Februar 12
  • 25. Vorsicht!Montag, 27. Februar 12
  • 26. SCSS #page-wrapper #page #main-wrapper #main #content, #page-wrapper #main .column#content .content #node-2.node, .section .region #block-system-main.block .content #node-2.node { font-weight: bold; h2.active, h2, .visuallyhidden { color: #fff; a, .button { &:link, &:visited { background-color: #f00 } &:hover, &focus { #background-color: #f0f; } } } }Montag, 27. Februar 12
  • 27. CSS #page-wrapper #page #main-wrapper #main #content, #page-wrapper #main .column#content .content #node-2.node, .section .region #block-system-main.block .content #node-2.node { font-weight: bold; } #page-wrapper #page #main-wrapper #main #content h2.active, #page-wrapper #page #main-wrapper #main #content h2, #page-wrapper #page #main-wrapper #main #content .visuallyhidden, #page-wrapper #main .column#content .content #node-2.node h2.active, #page-wrapper #main .column#content .content #node-2.node h2, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden, .section .region #block-system-main.block .content #node-2.node h2.active, .section .region #block-system-main.block .content #node-2.node h2, .section .region #block-system-main.block .content #node-2.node .visuallyhidden { color: #fff; } #page-wrapper #page #main-wrapper #main #content h2.active a:link, #page-wrapper #page #main-wrapper #main #content h2.active a:visited, #page-wrapper #page #main-wrapper #main #content h2.active .button:link, #page-wrapper #page #main-wrapper #main #content h2.active .button:visited, #page-wrapper #page #main-wrapper #main #content h2 a:link, #page-wrapper #page #main-wrapper #main #content h2 a:visited, #page-wrapper #page #main-wrapper #main #content h2 .button:link, #page-wrapper #page #main-wrapper #main #content h2 .button:visited, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:link, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:visited, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:link, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:visited, #page-wrapper #main .column#content .content #node-2.node h2.active a:link, #page-wrapper #main .column#content .content #node-2.node h2.active a:visited, #page-wrapper #main .column#content .content #node-2.node h2.active .button:link, #page-wrapper #main .column#content .content #node-2.node h2.active .button:visited, #page-wrapper #main .column#content .content #node-2.node h2 a:link, #page-wrapper #main .column#content .content #node-2.node h2 a:visited, #page-wrapper #main .column#content .content #node-2.node h2 .button:link, #page-wrapper #main .column#content .content #node-2.node h2 .button:visited, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:link, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:visited, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:link, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:visited, .section .region #block-system-main.block .content #node-2.node h2.active a:link, .section .region #block-system-main.block .content #node-2.node h2.active a:visited, .section .region #block-system-main.block .content #node-2.node h2.active .button:link, .section .region #block-system-main.block .content #node-2.node h2.active .button:visited, .section .region #block-system-main.block .content #node-2.node h2 a:link, .section .region #block-system-main.block .content #node-2.node h2 a:visited, .section .region #block-system-main.block .content #node-2.node h2 .button:link, .section .region #block-system-main.block .content #node-2.node h2 .button:visited, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:link, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:visited, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button:link, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button:visited { background-color: red; } #page-wrapper #page #main-wrapper #main #content h2.active a:hover, #page-wrapper #page #main-wrapper #main #content h2.active a focus, #page-wrapper #page #main-wrapper #main #content h2.active .button:hover, #page-wrapper #page #main-wrapper #main #content h2.active .button focus, #page-wrapper #page #main-wrapper #main #content h2 a:hover, #page-wrapper #page #main-wrapper #main #content h2 a focus, #page-wrapper #page #main-wrapper #main #content h2 .button:hover, #page-wrapper #page #main-wrapper #main #content h2 .button focus, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:hover, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a focus, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:hover, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button focus, #page-wrapper #main .column#content .content #node-2.node h2.active a:hover, #page-wrapper #main .column#content .content #node-2.node h2.active a focus, #page-wrapper #main .column#content .content #node-2.node h2.active .button:hover, #page-wrapper #main .column#content .content #node-2.node h2.active .button focus, #page-wrapper #main .column#content .content #node-2.node h2 a:hover, #page-wrapper #main .column#content .content #node-2.node h2 a focus, #page-wrapper #main .column#content .content #node-2.node h2 .button:hover, #page-wrapper #main .column#content .content #node-2.node h2 .button focus, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:hover, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a focus, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:hover, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button focus, .section .region #block-system-main.block .content #node-2.node h2.active a:hover, .section .region #block-system-main.block .content #node-2.node h2.active a focus, .section .region #block-system-main.block .content #node-2.node h2.active .button:hover, .section .region #block-system-main.block .content #node-2.node h2.active .button focus, .section .region #block-system-main.block .content #node-2.node h2 a:hover, .section .region #block-system-main.block .content #node-2.node h2 a focus, .section .region #block-system-main.block .content #node-2.node h2 .button:hover, .section .region #block-system-main.block .content #node-2.node h2 .button focus, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:hover, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a focus, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button:hover, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button focus { #background-color: #f0f; }Montag, 27. Februar 12
  • 28. Mixins Ein Gang höherMontag, 27. Februar 12
  • 29. @mixin link-effect { SCSS color: #f00; &:hover { color: darken(#f00, 30%); } } nav a { @include link-effect; } nav a { color: #f00; CSS } nav a:hover { color: #660000; }Montag, 27. Februar 12
  • 30. @mixin border-radius($radius) { SCSS -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); } .box { -webkit-border-radius: 5px; CSS -moz-border-radius: 5px; border-radius: 5px; }Montag, 27. Februar 12
  • 31. SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
  • 32. SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
  • 33. Montag, 27. Februar 12
  • 34. @mixin linkcolor($dark: false) { @if $dark == true { SCSS color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } } } a { @include linkcolor(); } a.alt { @include linkcolor(true); } a { color: white; } a:hover { color: #ccc; } CSS a.alt { color: black; } a.alt:hover { color: blue; }Montag, 27. Februar 12
  • 35. Montag, 27. Februar 12
  • 36. Das wird geboten ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Zugri! auf Projekt-Umgebung ★ Projekt-Kon"guration ★ ErweiterungenMontag, 27. Februar 12
  • 37. .box { SCSS @include border-radius(8px); @include background(linear-gradient(#000, #333)); } .box { -moz-border-radius: 8px; CSS -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: linear-gradient(#000000, #333333); }Montag, 27. Februar 12
  • 38. header { SCSS background: image-url(logo.jpg); h1 { width: image-width(logo.jpg); height: image-height(logo.jpg); } } header { CSS background: url(/images/logo.jpg?1321202172); } header h1 { width: 346px; height: 400px; }Montag, 27. Februar 12
  • 39. SCSS .unlocked { background: inline-image(unlocked.png); } .unlocked { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD +AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/ CSS eHBhY2tldCBiZWdpbj0i77u/ IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIF hNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8v d3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi 8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0 dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYW NpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBQkU5NzQ1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiIHhtcE1NOkRvY3VtZW50SUQ9 InhtcC5kaWQ6ODVBQkU5NzU1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLm lpZDowQjAyREI0RDU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjAyREI0RTU2NEUxMUUxQUY4N0U1 MjVDNDBDNjM2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/ Pvv5YQwAAACEUExURcvLy/Pz87CwsImJic/Pz/v7++Tk5K+vr62trd3d3YCAgLGxsaKiot/f38rKyri4uPf398fHx/ Dw8Pj4+LW1tenp6ZaWlqurq66uroODg8jIyIuLi5ycnIqKiu/v7/r6+oWFhZubm9jY2KampuHh4ZiYmNLS0tnZ2YSEhH9/f7Kysv/// 3IN8QsAAACqSURBVHja7NXnDoIwFAXgikXcey/cem7f//2sDV3E8EdRY3qTNvTLpaeEEJh4Uizgn2L/ clxucziZAlgdPIzXaA8SbIYu1nCOhZiDuXhFIuduk1xsIHr0L2YKO0zVGHueihNxhXXoulXMOSOD1XLRpu8s8hZl1Rv9+tuUh3yls4zbP7bnd4NC +vvSySAZVGs76U55rYfdU3+v5AXlLEv3rfiJKPw7CvAuwAAQmUbpoWRiDAAAAABJRU5ErkJggg==); }Montag, 27. Februar 12
  • 40. flickr.com/photos/runningdevineMontag, 27. Februar 12
  • 41. @import "icon/*.png"; SCSS @include all-icon-sprites($dimensions:true); .icon-sprite, .icon-minus { CSS background: url(/images/icon-sd557c6037f.png) no-repeat; } .icon-minus { background-position: 0 0; height: 7px; width: 24px; }Montag, 27. Februar 12
  • 42. Workflow Wie gehen wir damit um?Montag, 27. Februar 12
  • 43. Wege nach Rom ★ Lokal kompilieren SASS/SCSS-Datei & CSS im Repository ★ Auf dem Server kompilieren ★ Vom CMS kompilieren lassen SASS/SCSS-Modul & Compass-Modul für Drupal ★ Beim Deployment kompilierenMontag, 27. Februar 12
  • 44. CodeKit Eierlegendewollmilchsau ★ GUI ★ Compiliert SASS, LESS, Compass & Stylus ★ Compiliert Co!eScript ★ Browser-Reload ★ Bildkompression ★ uvm.Montag, 27. Februar 12
  • 45. Drupal-Module ★ Zusätzliche Fehlerquelle ★ Compass-Modul benötigt installiertes Compass auf dem Server ★ SASS/SCSS-Modul kann kein Compass Wer nur SASS benutzt, sollte es mal ausprobierenMontag, 27. Februar 12
  • 46. Meine Lieblingslösung ★ Lokal Entwickeln und Compilieren Mit CodeKit oder Terminal (bei Netzwerk- oder Server-Setups) ★ Nur die unkompilierten Dateien im Repository ★ Beim Deployment wird von Capistrano die CSS-Datei auf dem Server kompiliertMontag, 27. Februar 12
  • 47. Fragen? @dantz, moin@dantz.me, vortrieb.netMontag, 27. Februar 12