Bridging Design Gaps with Sass + Compass

D6582757f4b88e61edfca4d9bb524750?s=47 Design Orlando
October 09, 2012

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.

D6582757f4b88e61edfca4d9bb524750?s=128

Design Orlando

October 09, 2012
Tweet

Transcript

  1. None
  2. thanks

  3. design g_ps

  4. None
  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); }
  11. None
  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; }

  19. None
  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%); } }
  25. None
  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

  47. None
  48. None
  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>

  58. None
  59. None
  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

  70. None
  71. None
  72. None
  73. $base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;

  74. None
  75. h1 { @include adjust-font-size-to(50px); } h2 { @include adjust-font-size-to(28px); }

    blockquote { @include adjust-font-size-to(20px); background: #ccc; }
  76. None
  77. blockquote { @include adjust-font-size-to(20px); @include adjust-leading-to(2); background: #ccc; text-align: center;

    }
  78. None
  79. p { @include leader(1); @include trailer(1); } h1 { @include

    adjust-font-size-to(50px); @include leader(1, 50px); @include trailer(1, 50px); }
  80. None
  81. h1 { ... @include trailing-border(10px, 1, 50px); }

  82. None
  83. not limited to text

  84. thanks!

  85. @nickawalsh