Bridging Design Gaps with Sass + Compass

Nick Walsh discussing the last ten percent of projects and how to use Sass and Compass to aid design.

2. thanks
3. design g_ps
5. variables nesting mixins extends
6. $header: #333; h1 { color: $header; }
7. aside { float: right; p { font-size: 1.2em; } }
8. @mixin border($color) { border: 1px solid $color; } aside { @include border(black); }
9. @mixin border($color) { border: 1px solid $color; } aside { @include border(black); }
10. @mixin border($color) { border: 1px solid $color; } aside { @include border(black); }
12. codekit fire.app scout
13. final 10% - deciding in the browser
14. a different sort of less effort
15. eyedropper responsive + ie sprite editing vertical rhythm
16. color 16 / 84
17. predictable + repeatable
18. $color-link: #47b4d0; a { color: $color-link; }
20. red() green() blue() mix() hue() saturation() lightness() adjust-hue() lighten() darken() saturate() desaturate() grayscale() complement() invert()
21. red() green() blue() mix() hue() saturation() lightness() adjust-hue() lighten() darken() saturate() desaturate() grayscale() complement() invert()
22. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%); } &:active { color: darken($color-link, 20%); } }
23. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%); } &:active { color: darken($color-link, 20%); } }
24. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%); } &:active { color: darken($color-link, 20%); } }
26. $color-link: #47b4d0; a { color: $color-link; color: rgba(71,180,208,0.8); }
27. $color-link: #47b4d0; a { color: $color-link; color: rgba($color-link,0.8); }
28. insta-cascade
29. responsive 29 / 84
30. aside { background: #333; } @media (min-width: 700px) { aside { float: right; width: 30%; } }
31. aside { background: #333; @media (min-width: 700px) { float: right; width: 30%; } }
32. @mixin respond-to($x) { @media (min-width: $x) { @content; } } aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }
33. @mixin respond-to($x) { @media (min-width: $x) { @content; } } aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }
34. @mixin respond-to($x) { @media (min-width: $x) { @content; } } aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }
35. ie < 9
36. recreate functionality duplicate code
37. <!DOCTYPE html> <!--[if lte IE 8]> <html class="ie"> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]-->
38. aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } .ie & { float: right; width: 30%; } }
39. maintenance + collaboration
40. @mixin respond-to($x) { @media (min-width: $x) { @content; } .ie & { @content; } }
41. efficiency?
42. compass 42 / 84
43. reusable patterns
44. .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
45. @import "compass"; .box { @include box-sizing(border-box); }
46. sprites 46 / 84
49. icons/search.png icons/search-active.png
50. $icons: sprite-map("icons/*.png");
51. icons-s3bf80e8870.png
52. $icons: sprite-map("icons/*.png"); i { background: $icons; display: block; text-indent: -9999px; }
53. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover { background-position: sprite-position($icons, search-active); } }
54. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover { background-position: sprite-position($icons, search-active); } }
55. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover { background-position: sprite-position($icons, search-active); } }
56. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover { background-position: sprite-position($icons, search-active); } }
57. <i class="icn-search">Search</i>
60. retina?
61. icons-hd/search.png icons-hd/search-active.png
62. $icons: sprite-map("icons/*.png"); $icons-hd: sprite-map("icons-hd/*.png");
63. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio: 1.5) { @include background-size(100px 200px); background: $icons-hd; } }
64. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio: 1.5) { @include background-size(100px 200px); background: $icons-hd; } }
65. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio: 1.5) { @include background-size(100px 200px); background: $icons-hd; } }
66. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio: 1.5) { @include background-size(100px 200px); background: $icons-hd; } }
67. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover { background-position: sprite-position($icons, search-active); } }
68. .icn-search { ... @media (-webkit-min-device-pixel-ratio: 1.5) { background-position: sprite-position($icons-hd, search); &:hover { background-position: sprite-position($icons-hd, search-active) } } }
69. vertical rhythm 69 / 84
73. $base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;
75. h1 { @include adjust-font-size-to(50px); } h2 { @include adjust-font-size-to(28px); } blockquote { @include adjust-font-size-to(20px); background: #ccc; }
77. blockquote { @include adjust-font-size-to(20px); @include adjust-leading-to(2); background: #ccc; text-align: center; }
79. p { @include leader(1); @include trailer(1); } h1 { @include adjust-font-size-to(50px); @include leader(1, 50px); @include trailer(1, 50px); }
81. h1 { ... @include trailing-border(10px, 1, 50px); }
83. not limited to text
84. thanks!
85. @nickawalsh