Work and play with SASS & Compass

1,976 views

Published on

Still there are some controversies about whether precompiling CSS is a good or a bad idea. Sometimes this leads to fights, struggles and name-calling. This talk is almost clean of it.

I'll show examples of "SASS" and "Compass"" from his day-to-day work and what you can do if you unleash the power of preprocessing.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,976
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Work and play with SASS & Compass

  1. 1. Work & Play y(Verantwortungsvolles) Arbeiten mit SASS & Compass
  2. 2. 0Andreas Dantz@dantz — ad@vortrieb.net
  3. 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. 4. CSS 2.1 flickr.com/photos/thomasbrauner
  5. 5. CSS 3 h p://www.flickr.com/photos/bcnbits/
  6. 6. .sass .css.scss
  7. 7. CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }
  8. 8. SASS .box margin: 1em .content border: 1px solid #f00
  9. 9. SCSS .box { margin: 1em .content { border: 1px solid #f00; } }
  10. 10. 1Variablenerste Schri e in Richtung Programmiersprache
  11. 11. $color-main: #00aeef;$baseline: 16px; SCSSstrong { color: $color-main; }p { margin-bottom: $baseline; } CSSstrong { color: #00aeef; }p { margin-bottom: 16px; }
  12. 12. 4px + 4px; SCSS4px - 4px;4px * 2;4px / 2;8px;0px; CSS8px;2px;
  13. 13. halbe Grundlinie als Margin halbe Grundlinie abzüglich Rahmen als Padding
  14. 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. 15. round(4.3);ceil(4.2);floor(4.6); SCSSabs(-12);percentage(120/960);4;5;4; CSS12;12,5%;
  16. 16. $color-main: #00aeef; SCSSa { color: $color-main; }a:hover,a:focus { color: lighten($color-main, 15%); }a { color: #00aeef; } CSSa:hover,a:focus { color: #3dcaff;}
  17. 17. SCSSadjust-hue($color, $degrees)lighten($color, $amount)darken($color, $amount)saturate($color, $amount)desaturate($color, $amount)grayscale($color)complement($color)invert($color)
  18. 18. SCSS@if@for@each@while
  19. 19. 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. Its 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 {    // Im 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    }
  20. 20. 2Nestingund andere Sauerein mit Selektoren
  21. 21. .box { margin: 12px; h2 { SCSS font-size: $baseline * 2; }}.box {} padding: 12px; CSS.box h2 { font-size: 64px;}
  22. 22. SCSSarticle { header, footer { background-color: $color-main; }}article header, article footer { CSS background-color: #00aeef;}
  23. 23. $color-main: #00aeef; SCSSa { color: $color-main; &:hover, &:focus { color: lighten($color-main, 15%); }}a { color: #00aeef; }a:hover, a:focus { CSS color: #3dcaff;}
  24. 24. 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;}
  25. 25. flickr.com/photos/sharynmorrow/
  26. 26. .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;}
  27. 27. .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;}
  28. 28. flickr.com/photos/basibanget
  29. 29. #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; } } }}
  30. 30. #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 #contenth2.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 #contenth2.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;}
  31. 31. 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
  32. 32. 3ArchitekturOrdnung schafft Ordnung
  33. 33. application.scss_base.scss_layout.scss_menu.scss_mixins.scss…
  34. 34. @include "base";@include "mixins";@include "layout"; keine Ausgabe!@include "menu";…
  35. 35. 4Mixinsjetzt bin ich offiziell CSS-Programmierer
  36. 36. @mixin link-effect { color: $color-main; &:hover, &:focus { SCSS color: darken($color-main, 30%); }}nav a { @include link-effect; }nav a {} color: #00aeef; CSSnav a:hover, nav a:focus { color: #003f56;}
  37. 37. Mixins sollst Du nur benutzen,wenn Parameter übergeben.Sonst wirst das Stylesheet Du beschmutzen,kannst du damit wirklich leben?
  38. 38. @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;}
  39. 39. @mixin linkcolor($link:black, $hover:red) { SCSS color: $link; &:hover, a:focus { color: $hover; }}a { @include linkcolor($hover:yellow); }a { color: black; } CSSa:hover, a:focus { color: yellow; }
  40. 40. @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; } CSSa.alt:hover { color: blue; }
  41. 41. sonspring.com/journal/sass-for-designers
  42. 42. 5
  43. 43. @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);}
  44. 44. 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;}
  45. 45. .unlocked { SCSS background: inline-image(unlocked.png);}.unlocked { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/ CSSIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBQkU5NzQ1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODVBQkU5NzU1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQjAyREI0RDU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjAyREI0RTU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvv5YQwAAACEUExURcvLy/Pz87CwsImJic/Pz/v7++Tk5K+vr62trd3d3YCAgLGxsaKiot/f38rKyri4uPf398fHx/Dw8Pj4+LW1tenp6ZaWlqurq66uroODg8jIyIuLi5ycnIqKiu/v7/r6+oWFhZubm9jY2KampuHh4ZiYmNLS0tnZ2YSEhH9/f7Kysv///3IN8QsAAACqSURBVHja7NXnDoIwFAXgikXcey/cem7f//2sDV3E8EdRY3qTNvTLpaeEEJh4Uizgn2L/clxucziZAlgdPIzXaA8SbIYu1nCOhZiDuXhFIuduk1xsIHr0L2YKO0zVGHueihNxhXXoulXMOSOD1XLRpu8s8hZl1Rv9+tuUh3yls4zbP7bnd4NC+vvSySAZVGs76U55rYfdU3+v5AXlLEv3rfiJKPw7CvAuwAAQmUbpoWRiDAAAAABJRU5ErkJggg==);}
  46. 46. flickr.com/photos/runningdevine
  47. 47. @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;}
  48. 48. 6Responsivedas Chaos beherrschen
  49. 49. @media screen and (min-width: 480px) { nav li { float: none; }}
  50. 50. $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; }}
  51. 51. 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; } }}
  52. 52. […]@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; } }[…]
  53. 53. $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; }}
  54. 54. .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; }}
  55. 55. 7Workflowwoher? wie? wie viel?
  56. 56. CodeKit
  57. 57. TEAMWORK flickr.com/photos/runningdevine
  58. 58. 8DankeFragen?

×