SASSMontag, 27. Februar 12                         &                    Compass
Andreas Dantz                         Designer & Frontend-Entwickler                                 bei Vortrieb in Breme...
„CSS zu kompilieren ist eine                bescheuerte Idee. Das ist völlig                unnötig, produziert keinen gut...
Montag, 27. Februar 12
CSS                         .box {                           margin: 1em;                         }                       ...
SASS                         .box                           margin: 1em                           .content                ...
SCSS                         .box {                           margin: 1em                           .content {            ...
CSS 2.1Montag, 27. Februar 12
CSS 3Montag, 27. Februar 12
Variablen & Co.                         CSS wird ProgrammierspracheMontag, 27. Februar 12
SCSS         $main-color: #f00;         $comp-color: #0ff;         a { color: $main-color; }         a:hover,         a:fo...
SCSS         4px             +   4px;         4px             -   4px;         4px             *   2;         4px         ...
$baseline: 16px;                            SCSS         $border-width: 1px;         .box {           border: $border-widt...
round(4.3);          SCSS         ceil(4.2);         floor(4.6);         abs(-12);         percentage(26/50);         4;  ...
$maincolor: #f00;                         SCSS         a { color: $maincolor; }         a:hover,         a:focus { color: ...
SCSS         adjust-hue($color, $degrees)         lighten($color, $amount)         darken($color, $amount)         saturat...
Nesting                         Erbschaften                         und das spielen in BäumenMontag, 27. Februar 12
.box {                         SCSS           width: 60%;           h2 { font-size: 24px; }         }         .box {      ...
article {                                  SCSS           header, footer { background-color: #000; }         }         art...
a {                                        SCSS           color: #f00;           text-decoration: none;           &:hover ...
SCSS         button {           background: linear-gradient(#fff, #eee };           .no-cssgradients & { background: #eee ...
flickr.com/photos/sharynmorrow/Montag, 27. Februar 12
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, 27. Februar 12
SCSS         #page-wrapper #page #main-wrapper #main #content,         #page-wrapper #main .column#content .content       ...
CSS         #page-wrapper #page #main-wrapper #main #content,         #page-wrapper #main .column#content .content #node-2...
Mixins                          Ein Gang höherMontag, 27. Februar 12
@mixin link-effect {                      SCSS           color: #f00;           &:hover { color: darken(#f00, 30%); }     ...
@mixin border-radius($radius) {         SCSS           -webkit-border-radius: $radius;           -moz-border-radius:    $r...
SCSS         @mixin linkcolor($link:black, $hover:red) {           color: $link;           &:hover { color: $hover; }     ...
SCSS         @mixin linkcolor($link:black, $hover:red) {           color: $link;           &:hover { color: $hover; }     ...
Montag, 27. Februar 12
@mixin linkcolor($dark: false) {           @if $dark == true {                                               SCSS         ...
Montag, 27. Februar 12
Das wird geboten               ★ Alles, was SASS bietet               ★ Noch mehr Funktionen               ★ Mixin Bibliot...
.box {                                       SCSS           @include border-radius(8px);           @include background(lin...
header {                                  SCSS           background: image-url(logo.jpg);           h1 {             width...
SCSS         .unlocked {           background: inline-image(unlocked.png);         }         .unlocked {           backgro...
flickr.com/photos/runningdevineMontag, 27. Februar 12
@import "icon/*.png";                                                   SCSS         @include all-icon-sprites($dimensions...
Workflow                          Wie gehen wir damit um?Montag, 27. Februar 12
Wege nach Rom               ★ Lokal kompilieren                         SASS/SCSS-Datei & CSS im Repository               ...
CodeKit    Eierlegendewollmilchsau                               ★ GUI                               ★ Compiliert SASS, LE...
Drupal-Module               ★ Zusätzliche Fehlerquelle               ★ Compass-Modul benötigt installiertes               ...
Meine Lieblingslösung               ★ Lokal Entwickeln und Compilieren                         Mit CodeKit oder Terminal (...
Fragen?                         @dantz, moin@dantz.me, vortrieb.netMontag, 27. Februar 12
Upcoming SlideShare
Loading in …5
×

Frontend-Entwicklung mit SASS & Compass

1,283 views

Published on

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,283
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Frontend-Entwicklung mit SASS & Compass

  1. 1. SASSMontag, 27. Februar 12 & Compass
  2. 2. Andreas Dantz Designer & Frontend-Entwickler bei Vortrieb in Bremen. @dantz moin@dantz.me vortrieb.netMontag, 27. Februar 12
  3. 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. 4. Montag, 27. Februar 12
  5. 5. CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }Montag, 27. Februar 12
  6. 6. SASS .box margin: 1em .content border: 1px solid #f00Montag, 27. Februar 12
  7. 7. SCSS .box { margin: 1em .content { border: 1px solid #f00 } }Montag, 27. Februar 12
  8. 8. CSS 2.1Montag, 27. Februar 12
  9. 9. CSS 3Montag, 27. Februar 12
  10. 10. Variablen & Co. CSS wird ProgrammierspracheMontag, 27. Februar 12
  11. 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. 12. SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; 8px; 0px; CSS 8px; 2px;Montag, 27. Februar 12
  13. 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. 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. 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. 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. 17. Nesting Erbschaften und das spielen in BäumenMontag, 27. Februar 12
  18. 18. .box { SCSS width: 60%; h2 { font-size: 24px; } } .box { width: 60%; CSS } .box h2 { font-size: 24px; }Montag, 27. Februar 12
  19. 19. article { SCSS header, footer { background-color: #000; } } article header, article footer { background-color: #000 CSS }Montag, 27. Februar 12
  20. 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. 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. 22. flickr.com/photos/sharynmorrow/Montag, 27. Februar 12
  23. 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. 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. 25. Vorsicht!Montag, 27. Februar 12
  26. 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. 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. 28. Mixins Ein Gang höherMontag, 27. Februar 12
  29. 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. 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. 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. 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. 33. Montag, 27. Februar 12
  34. 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. 35. Montag, 27. Februar 12
  36. 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. 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. 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. 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. 40. flickr.com/photos/runningdevineMontag, 27. Februar 12
  41. 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. 42. Workflow Wie gehen wir damit um?Montag, 27. Februar 12
  43. 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. 44. CodeKit Eierlegendewollmilchsau ★ GUI ★ Compiliert SASS, LESS, Compass & Stylus ★ Compiliert Co!eScript ★ Browser-Reload ★ Bildkompression ★ uvm.Montag, 27. Februar 12
  45. 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. 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. 47. Fragen? @dantz, moin@dantz.me, vortrieb.netMontag, 27. Februar 12

×