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

1. SASS
Montag, 27. Februar 12
&
Compass

2. Andreas Dantz
Designer & Frontend-Entwickler
bei Vortrieb in Bremen.
@dantz
moin@dantz.me
vortrieb.net
Montag, 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 Dantz
Montag, 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 #f00
Montag, 27. Februar 12

7. SCSS
.box {
margin: 1em
.content {
border: 1px solid #f00
}
}
Montag, 27. Februar 12

8. CSS 2.1
Montag, 27. Februar 12

9. CSS 3
Montag, 27. Februar 12

10. Variablen & Co.
CSS wird Programmiersprache
Montag, 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äumen
Montag, 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öher
Montag, 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; }
CSS
Montag, 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; }
CSS
Montag, 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
★ Erweiterungen
Montag, 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/runningdevine
Montag, 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 kompilieren
Montag, 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 ausprobieren
Montag, 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 kompiliert
Montag, 27. Februar 12

47. Fragen?
@dantz, moin@dantz.me, vortrieb.net
Montag, 27. Februar 12