Sass and Compass allow for more powerful CSS authoring by adding features like variables, nested rules, mixins and functions. This allows stylesheets to be written in a more modular, maintainable and scalable way. Sass code is compiled to normal CSS for browser rendering. Key features demonstrated include variables for consistent values, nesting to reduce selector complexity, mixins for reusable code snippets, and Compass libraries for common CSS3 features and responsive design.

1. Work & Play
y
(Verantwortungsvolles) Arbeiten mit SASS & Compass

2. 0
Andreas Dantz
@dantz — ad@vortrieb.net

3. „ CSS zu kompilieren ist total bescheuert,
unnötig und führt zu minderwertigen
Ergebnissen. Wer so etwas nutzt, schlägt auch
wehrlose Omas auf der Straße.
Andreas Dantz, anno 2009

4. CSS 2.1
flickr.com/photos/thomasbrauner

5. CSS 3
h p://www.flickr.com/photos/bcnbits/

6. .sass
.css
.scss

7. CSS
.box {
margin: 1em;
}
.box .content {
border: 1px solid #f00;
}

8. SASS
.box
margin: 1em
.content
border: 1px solid #f00

9. SCSS
.box {
margin: 1em
.content {
border: 1px solid #f00;
}
}

10. 1
Variablen
erste Schri e in Richtung Programmiersprache

11. $color-main: #00aeef;
$baseline: 16px;
SCSS
strong { color: $color-main; }
p { margin-bottom: $baseline; }
CSS
strong { color: #00aeef; }
p { margin-bottom: 16px; }

12. 4px + 4px;
SCSS
4px - 4px;
4px * 2;
4px / 2;
8px;
0px;
CSS
8px;
2px;

13. halbe Grundlinie als Margin
halbe Grundlinie abzüglich
Rahmen als Padding

14. $baseline: 32px;
$border-width: 4px; SCSS
.box {
border: $border-width solid $color-main;
margin: $baseline / 2;
padding: $baseline / 2 - $border-width;
}
.box {
border: 4px solid #00aeef;
margin: 16px;
CSS
padding: 12px;
}

15. round(4.3);
ceil(4.2);
floor(4.6);
SCSS
abs(-12);
percentage(120/960);
4;
5;
4;
CSS
12;
12,5%;

16. $color-main: #00aeef;
SCSS
a { color: $color-main; }
a:hover,
a:focus { color: lighten($color-main, 15%); }
a { color: #00aeef; } CSS
a:hover,
a:focus {
color: #3dcaff;
}

17. SCSS
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
grayscale($color)
complement($color)
invert($color)

18. SCSS
@if
@for
@each
@while

20. SCSS
@import "compass/reset","compass/css3";
@import "layout";
// ============== Vars =====================
$items: 6; // number of items
$arc: 90; // arc of the circle
$angle: $arc/$items; // angle between items
$space:170; // a value in pixel. It's the space between the red circle and the items
$circleCenterX: 30; // the X coord of the red circle center
$circleCenterY: 30; // the Y coord of the red circle center
$disappearDelay: 50;
// Generate items position + keyframes animation
@for $i from 1 through $items {
// I'm not really good in math, so I suppose that they have a better way to calcul coordinates :)
$rad: ( $angle * ($i - 1) + $angle/2 ) * (pi()/180);
$x:round(($circleCenterX + $space) * cos($rad) );
$y:round(-($circleCenterY + $space) * sin($rad) );
// Coords for the rebound during the animation
$xm: round($x * 1.15);
$ym: round($y * 1.15);
$disappearDelay: $disappearDelay * 1.35;
// CSS checkbox + label tricks
#menu:checked ~ .items li:nth-child(#{$i}) {
-webkit-animation-name: "appear-'#{$i}'";
-webkit-animation-duration: 240ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: (20 * $i)+ms;
}
#menu:not(:checked) ~ .items li:nth-child(#{$i}) {
-webkit-animation-name: "disappear-'#{$i}'";
-webkit-animation-duration: (320 + $disappearDelay)+ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards; h ps://github.com/Victa/path-menu
}

21. 2
Nesting
und andere Sauerein mit Selektoren

23. .box {
margin: 12px;
h2 {
SCSS
font-size: $baseline * 2;
}
}
.box {
}
padding: 12px; CSS
.box h2 {
font-size: 64px;
}

24. SCSS
article {
header, footer { background-color: $color-main; }
}
article header, article footer {
CSS
background-color: #00aeef;
}

25. $color-main: #00aeef; SCSS
a {
color: $color-main;
&:hover,
&:focus { color: lighten($color-main, 15%); }
}
a { color: #00aeef; }
a:hover, a:focus {
CSS
color: #3dcaff;
}

26. button {
color: #fff;
SCSS
background: linear-gradient(top,
$color-main 0%, darken($color-main, 5%) 100%);
.no-cssgradients & { background: #eee };
}
button {
background: linear-gradient(top,
#00aeef 0%, #009bd5 100%);
CSS
}
.no-cssgradients button {
background: #eee;
}

27. flickr.com/photos/sharynmorrow/

29. .message {
SCSS
background-color: lighten($color-main, 40%);
border: $border-width solid $color-main;
h3 {
font-size: $baseline / 2;
}
p:last-child { margin-bottom: 0; }
}
.error {
@extend .message;
background-color: lighten($color-error, 40%);
border-color: $color-error;
}

30. .message, .error {
background-color: #bcedff; CSS
border: 4px solid #00aeef;
padding: 1em;
margin-bottom: 32px;
}
.message h3, .error h3 {
font-size: 16px;
margin-bottom: 16px;
}
.message p:last-child, .error p:last-child {
margin-bottom: 0;
}
.error {
background-color: #ffcccc;
border-color: red;
}

31. flickr.com/photos/basibanget

32. #page-wrapper #page #main-wrapper #main #content,
SCSS
#page-wrapper #main .column#content,
.section .region #block-system-main.block {
font-weight: bold;
h2.active, h2, .visuallyhidden {
color: #fff;
a, .button {
&:link, &:visited { background-color: #f00 }
&:hover, &focus { #background-color: #f0f; }
}
}
}

33. #page-wrapper #page #main-wrapper #main #content,
CSS
#page-wrapper #main .column#content,
.section .region #block-system-main.block {
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 h2.active,
#page-wrapper #main .column#content h2,
#page-wrapper #main .column#content .visuallyhidden,
.section .region #block-system-main.block h2.active,
.section .region #block-system-main.block h2,
.section .region #block-system-main.block .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 h2.active a:link,
#page-wrapper #main .column#content h2.active a:visited,
#page-wrapper #main .column#content h2.active .button:link,
#page-wrapper #main .column#content h2.active .button:visited,
#page-wrapper #main .column#content h2 a:link,
#page-wrapper #main .column#content h2 a:visited,
#page-wrapper #main .column#content h2 .button:link,
#page-wrapper #main .column#content h2 .button:visited,
#page-wrapper #main .column#content .visuallyhidden a:link,
#page-wrapper #main .column#content .visuallyhidden a:visited,
#page-wrapper #main .column#content .visuallyhidden .button:link,
#page-wrapper #main .column#content .visuallyhidden .button:visited,
.section .region #block-system-main.block h2.active a:link,
.section .region #block-system-main.block h2.active a:visited,
.section .region #block-system-main.block h2.active .button:link,
.section .region #block-system-main.block h2.active .button:visited,
.section .region #block-system-main.block h2 a:link,
.section .region #block-system-main.block h2 a:visited,
.section .region #block-system-main.block h2 .button:link,
.section .region #block-system-main.block h2 .button:visited,
.section .region #block-system-main.block .visuallyhidden a:link,
.section .region #block-system-main.block .visuallyhidden a:visited,
.section .region #block-system-main.block .visuallyhidden .button:link,
.section .region #block-system-main.block .visuallyhidden .button:visited {
background-color: #f00;
}
#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 h2.active a:hover,
#page-wrapper #main .column#content h2.active a focus,
#page-wrapper #main .column#content h2.active .button:hover,
#page-wrapper #main .column#content h2.active .button focus,
#page-wrapper #main .column#content h2 a:hover,
#page-wrapper #main .column#content h2 a focus,
#page-wrapper #main .column#content h2 .button:hover,
#page-wrapper #main .column#content h2 .button focus,
#page-wrapper #main .column#content .visuallyhidden a:hover,
#page-wrapper #main .column#content .visuallyhidden a focus,
#page-wrapper #main .column#content .visuallyhidden .button:hover,
#page-wrapper #main .column#content .visuallyhidden .button focus,
.section .region #block-system-main.block h2.active a:hover,
.section .region #block-system-main.block h2.active a focus,
.section .region #block-system-main.block h2.active .button:hover,
.section .region #block-system-main.block h2.active .button focus,
.section .region #block-system-main.block h2 a:hover,
.section .region #block-system-main.block h2 a focus,
.section .region #block-system-main.block h2 .button:hover,
.section .region #block-system-main.block h2 .button focus,
.section .region #block-system-main.block .visuallyhidden a:hover,
.section .region #block-system-main.block .visuallyhidden a focus,
.section .region #block-system-main.block .visuallyhidden .button:hover,
.section .region #block-system-main.block .visuallyhidden .button focus {
#background-color: #f0f;
}

34. Die drei Legitimationen fürs Nesting in SASS
1. Ich möchte mehr Übersicht in meinem
Stylesheet
2. Ich hä e die Selektoren auch manuell in
CSS kombiniert
3. Ich will mir Tipparbeit sparen

35. 3
Architektur
Ordnung schafft Ordnung

36. application.scss
_base.scss
_layout.scss
_menu.scss
_mixins.scss
…

37. @include "base";
@include "mixins";
@include "layout"; keine Ausgabe!
@include "menu";
…

38. 4
Mixins
jetzt bin ich offiziell CSS-Programmierer

39. @mixin link-effect {
color: $color-main;
&:hover, &:focus {
SCSS
color: darken($color-main, 30%); }
}
nav a { @include link-effect; }
nav a {
}
color: #00aeef; CSS
nav a:hover, nav a:focus {
color: #003f56;
}

40. Mixins sollst Du nur benutzen,
wenn Parameter übergeben.
Sonst wirst das Stylesheet Du beschmutzen,
kannst du damit wirklich leben?

41. @mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
SCSS
border-radius: $radius;
}
.box { @include border-radius(5px); }
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
CSS
border-radius: 5px;
}

42. @mixin linkcolor($link:black, $hover:red) {
SCSS
color: $link;
&:hover, a:focus { color: $hover; }
}
a { @include linkcolor($hover:yellow); }
a { color: black; }
CSS
a:hover, a:focus { color: yellow; }

44. @mixin linkcolor($dark: false) {
@if $dark == true {
color: black;
SCSS
&:hover { color: blue; }
} @else {
color: white;
&:hover { color: #ccc; }
}
}
a { @include linkcolor(); }
a.alt { @include linkcolor(true); }
a { color: white; }
a:hover { color: #ccc; }
a.alt { color: black; }
CSS
a.alt:hover { color: blue; }

45. sonspring.com/journal/sass-for-designers

46. 5

47. @import "compass";
.box {
SCSS
@include border-radius(8px);
@include background(linear-gradient(#000, #333));
}
.box {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
CSS
-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);
}

48. header {
background: image-url('logo.jpg');
h1 {
SCSS
width: image-width('logo.jpg');
height: image-height('logo.jpg');
}
}
header { CSS
background: url('/images/logo.jpg?1321202172');
}
header h1 {
width: 346px;
height: 400px;
}

49. .unlocked {
SCSS
background: inline-image('unlocked.png');
}
.unlocked {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD
+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/
eHBhY2tldCBiZWdpbj0i77u/
CSS
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==');
}

50. flickr.com/photos/runningdevine

51. @import "icon/*.png";
@include all-icon-sprites($dimensions:true); SCSS
.icon-sprite, .icon-plus, .icon-minus {
background: url('/images/icon-sd55776.png');
no-repeat;
CSS
}
.icon-plus {
background-position: 0 0;
height: 14px;
width: 24px;
}
.icon-minus {
background-position: -15px 0;
height: 7px;
width: 24px;
}

52. 6
Responsive
das Chaos beherrschen

53. @media screen and (min-width: 480px) {
nav li {
float: none;
}
}

54. $break-phone: 320px;
nav li {
SCSS
float: left;
@media screen and (max-width: $break-phone + 1) {
float: none;
}
}
nav li {
}
float: left; CSS
@media screen and (max-width: 321px) {
nav li {
float: none;
}
}

55. SCSS
#blow {
@include border-radius(50%);
background-color: $color-main;
}
@for $i from 1 through 500 {
@media screen and (min-width: $break-phone + $i) {
#blow {
width: #{600 - $i}px;
height: #{600 - $i}px;
}
}
}

56. […]
@media screen and (min-width:
#blow {
335px) { CSS
width: 585px;
height: 585px; } }
@media screen and (min-width: 336px) {
#blow {
width: 584px;
height: 584px; } }
@media screen and (min-width: 337px) {
#blow {
width: 583px;
height: 583px; } }
@media screen and (min-width: 338px) {
#blow {
width: 582px;
height: 582px; } }
@media screen and (min-width: 339px) {
#blow {
width: 581px;
height: 581px; } }
@media screen and (min-width: 340px) {
#blow {
width: 580px;
height: 580px; } }
[…]

57. $break-small: 320px;
$break-large: 1024px;
SCSS
@mixin respond-to($media) {
@if $media == mobile {
@media only screen and (max-width: $break-mobile) { @content; }
}
@else if $media == medium {
@media only screen and (min-width: $break-mobile + 1)
and (max-width: $break-large - 1) { @content; }
}
@else if $media == widescreen {
@media only screen and (min-width: $break-large) { @content; }
}
}
.avatar {
border: 1px solid $color-main;
@include respond-to(mobile) { width: 100% ;}
@include respond-to(medium) { width: 150px; }
@include respond-to(widescreen) { float: none; }
}

58. .avatar {
border: 1px solid #00aeef;
CSS
}
@media only screen and (max-width: 320px) {
.avatar {
width: 100%;
}
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
.avatar {
width: 150px;
}
}
@media only screen and (min-width: 1024px) {
.avatar {
float: none;
}
}

59. 7
Workflow
woher? wie? wie viel?

61. CodeKit

62. TEAMWORK
flickr.com/photos/runningdevine

63. 8
Danke
Fragen?