Sass/Compass/LESS: Tips, Tricks & Best Practices

15555b729dfdfb05292eb0ef373f9a7a?s=47 Beau Smith
March 13, 2012

Sass/Compass/LESS: Tips, Tricks & Best Practices

Lessons learned in the CSS (Sass and LESS) trenches by @beau, @xeeton, @fat, and @pengwynn

15555b729dfdfb05292eb0ef373f9a7a?s=128

Beau Smith

March 13, 2012
Tweet

Transcript

  1. SASS/LESS/COMPASS Tips, Tricks & Best Practices 1 Thursday, March 15,

    12
  2. SASS/LESS/COMPASS Tips, Tricks & Best Practices Slides bit.ly/SassLessTips 1 Thursday,

    March 15, 12
  3. TOPICS 2 Thursday, March 15, 12

  4. TOPICS VARIABLES 2 Thursday, March 15, 12

  5. TOPICS VARIABLES NESTING 2 Thursday, March 15, 12

  6. TOPICS VARIABLES NESTING OPERATIONS 2 Thursday, March 15, 12

  7. TOPICS VARIABLES NESTING OPERATIONS EXTEND 2 Thursday, March 15, 12

  8. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION 2 Thursday, March

    15, 12
  9. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC 2

    Thursday, March 15, 12
  10. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC ADVANCED

    FEATURES 2 Thursday, March 15, 12
  11. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC ADVANCED

    FEATURES SASS VS. LESS 2 Thursday, March 15, 12
  12. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC ADVANCED

    FEATURES SASS VS. LESS SCSS VS. SASS SYNTAX 2 Thursday, March 15, 12
  13. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC ADVANCED

    FEATURES SASS VS. LESS SCSS VS. SASS SYNTAX CSS3 FEATURES 2 Thursday, March 15, 12
  14. TOPICS VARIABLES NESTING OPERATIONS EXTEND FILE ORGANIZATION CONTROL LOGIC ADVANCED

    FEATURES SASS VS. LESS SCSS VS. SASS SYNTAX CSS3 FEATURES 2 Thursday, March 15, 12
  15. WE CSS 3 Thursday, March 15, 12

  16. LESS SASS less Sass 4 Thursday, March 15, 12

  17. // variables @default-color: #000 // variables $default-color: #000 LESS SASS

    less Sass 4 Thursday, March 15, 12
  18. // variables @default-color: #000 // variables $default-color: #000 LESS SASS

    // mixins =foo($color: #fff) color: $color .bar +foo($default-color) // mixins .foo (@color: #fff) { color: @color; } .bar { .foo(@default-color); } less Sass 4 Thursday, March 15, 12
  19. // variables @default-color: #000 // variables $default-color: #000 LESS SASS

    // mixins =foo($color: #fff) color: $color .bar +foo($default-color) // nesting h1 color: #000 a font-weight: normal &:hover font-weight: bold // mixins .foo (@color: #fff) { color: @color; } .bar { .foo(@default-color); } // nesting h1 { color: #000; a { font-weight: normal; &:hover { font-weight: bold; } } } less Sass 4 Thursday, March 15, 12
  20. VARIABLES 5 Thursday, March 15, 12

  21. h1 { font-family: “Gill Sans”, sans-serif; font-size: 2em; color: #222;

    } h2 { font-family: “Gill Sans”, sans-serif; font-size: 1.25em; color: #666; } p { font-family: Georgia, serif; font-size: 1em; color: #666; } CSS 6 Thursday, March 15, 12
  22. h1 { font-family: “Gill Sans”, sans-serif; font-size: 2em; color: #222;

    } h2 { font-family: “Gill Sans”, sans-serif; font-size: 1.25em; color: #666; } p { font-family: Georgia, serif; font-size: 1em; color: #666; } CSS SCSS $baseline-size: 1em; $baseline-color: #666; $header-font: "Gill Sans", sans-serif; $body-font: Georgia, serif; h1 { font-family: $header-font; font-size: $baseline-size * 2; color: $baseline-color - #444; } h2 { font-family: $header-font; font-size: $baseline-size * 1.25; color: $baseline-color; } p { font-family: $body-font; font-size: $baseline-size; color: $baseline-color; } 6 Thursday, March 15, 12
  23. $page-width: 960px; $page-padding: 70px; .foo { width: $page-width - $page-padding

    * 2; padding: 0 $page-padding; margin-top: 37px; } NUMBERS • Use name to provide more context • Always equation if a number is calculated • If not a variable, numbers should be considered arbitrary values SCSS 7 Thursday, March 15, 12
  24. $baby-blue: #ebf7fc; $lightest-blue: #dbeef5; $lighter-blue: #b5dff1; $light-blue: #7bcbed; $blue: #39b2e5;

    $dark-blue: #0091ce; $darker-blue: #0073a4; $lightest-gray: #f3f3f3; $lighter-gray: #dedede; $light-gray: #b3b3b3; $gray: #838383; $dark-gray: #525252; $darker-gray: #202020; COLORS • Build a library of common brand colors • Add to 147 default named CSS colors SCSS 8 Thursday, March 15, 12
  25. $serif-default: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9

    L Regular", Times, "Times New Roman", serif; $serif-alt: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; $sans-serif-default: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; FONTS • Build a library of common font stacks • Just a list of strings (separated by space or comma) http://www.sitepoint.com/eight-definitive-font-stacks/ SCSS 9 Thursday, March 15, 12
  26. $button-primary-label-color: white; $button-primary-base-color: lighten($blue, 20%); $button-primary-highlight-color: lighten($blue, 15%); $button-primary-border-color: lighten($blue,

    10%); $button-primary-shadow-color: $light-gray; $button-secondary-label-color: black; $button-secondary-base-color: darken($gray, 10%); $button-secondary-highlight-color: darken($gray, 15%); $button-secondary-border-color: darken($gray, 20%); $button-secondary-shadow-color: $light-gray; .button-primary { padding: 6px 10px; font-family: "Lucida Grande", sans-serif; font-size: 12px; color: $button-primary-label-color; text-shadow: $button-primary-border-color 0 -1px 0; background-image: -webkit-linear-gradient( bottom, $button-primary-base-color 60%, $button-primary-highlight-color ); border: 1px solid $button-primary-border-color; border-radius: 4px; box-shadow: 0 2px 3px $button-primary-shadow-color; } SKINNING • Variables can declared with other variables • Use more semantic names for easy skinning • Update base, changes cascade SCSS 10 Thursday, March 15, 12
  27. Most people use dashes $my-var 11 Thursday, March 15, 12

  28. some prefer underscores $my_var Most people use dashes $my-var 11

    Thursday, March 15, 12
  29. you can use both! == some prefer underscores $my_var Most

    people use dashes $my-var 11 Thursday, March 15, 12
  30. NESTING 12 Thursday, March 15, 12

  31. CSS SASS 13 Thursday, March 15, 12

  32. .article { width: 100%; } .article h1 { font-size: 26px;

    } .article .author { font-style: italic; } .article width: 100% h1 font-size: 26px .author font-style: italic CSS SASS 13 Thursday, March 15, 12
  33. .article { width: 100%; } .article h1 { font-size: 26px;

    } .article .author { font-style: italic; } .article width: 100% h1 font-size: 26px .author font-style: italic CSS SASS 13 Thursday, March 15, 12
  34. .article { width: 100%; } .article h1 { font-size: 26px;

    } .article .author { font-style: italic; } .article width: 100% h1 font-size: 26px .author font-style: italic CSS SASS 13 Thursday, March 15, 12
  35. .article { width: 100%; } .article h1 { font-size: 26px;

    } .article .author { font-style: italic; } .article width: 100% h1 font-size: 26px .author font-style: italic CSS SASS 13 Thursday, March 15, 12
  36. .article { width: 100%; } .article h1 { font-size: 26px;

    } .article .author { font-style: italic; } .article width: 100% h1 font-size: 26px .author font-style: italic CSS SASS @media screen and (min-width: 480px) width: 480px h1 font-size: 40px @media screen and (min-width: 480px) { .article { width: 480px; } .article h1 { font-size: 40px; } } 13 Thursday, March 15, 12
  37. HOW DEEP CAN I GO? Sass nesting != HTML nesting

    14 Thursday, March 15, 12
  38. CSS SASS 15 Thursday, March 15, 12

  39. .subset-section background-color: #fff width: 960px .subset-skus width: 790px .subset-selection float:

    left width: 790px .registrant-needs margin-bottom: 10px text-align: right .subset-attributes width: 430px float: left .subset-pricing display: block text-align: right .price-special font-size: 11px .currency font-size: 16px CSS SASS 15 Thursday, March 15, 12
  40. .subset-section { background-color: white; width: 960px; } .subset-section .subset-skus {

    width: 790px; } .subset-section .subset-skus .subset-selection { float: left; width: 790px; } .subset-section .subset-skus .subset-selection .registrant-needs { margin-bottom: 10px; text-align: right; } .subset-section .subset-skus .subset-selection .registrant-needs .subset- attributes { width: 430px; float: left; } .subset-section .subset-skus .subset-selection .registrant-needs .subset- attributes .subset-pricing { display: block; text-align: right; } .subset-section .subset-skus .subset-selection .registrant-needs .subset- attributes .subset-pricing .price-special { font-size: 11px; } .subset-section .subset-skus .subset-selection .registrant-needs .subset- attributes .subset-pricing .price-special .currency { font-size: 16px; } .subset-section background-color: #fff width: 960px .subset-skus width: 790px .subset-selection float: left width: 790px .registrant-needs margin-bottom: 10px text-align: right .subset-attributes width: 430px float: left .subset-pricing display: block text-align: right .price-special font-size: 11px .currency font-size: 16px CSS SASS 15 Thursday, March 15, 12
  41. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  42. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  43. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  44. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  45. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  46. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  47. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  48. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  49. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  50. div { color: black; } div .foo { color: black;

    } div .foo { color: black; } div + .foo { color: black; } div.bar { color: black; } div:hover { color: black; } .no-borderradius div { color: black; } .parent div .child { color: black; } div color: black .foo color: black & .foo color: black + .foo color: black &.bar color: black &:hover color: black .no-borderradius & color: black .parent & .child color: black CSS SASS 16 Thursday, March 15, 12
  51. NESTING • group styles together • avoid selector duplication •

    parent selector • keep your code DRY Sass Nesting != HTML Nesting danger 17 Thursday, March 15, 12
  52. MIXINS A couple of our favorites 18 Thursday, March 15,

    12
  53. @mixin my-button($color, $margin: 5px) { background-color: $color; font-size: 1.2em; margin:

    $margin * 2; } .button { @include my-button(blue); color: white; } .button { background-color: blue; font-size: 1.2em; margin: 10px; color: white; } MIXINS • Reusable elements • Parameterizable (use reasonable defaults) • SASS & LESS have different approaches SCSS CSS 19 Thursday, March 15, 12
  54. TRANSITION SETUP • Opacity transition for modern browsers • Hide/show

    for IE8 20 Thursday, March 15, 12
  55. =transition-setup($value) opacity: $value .ie8 & @if $value >= 0.5 display:

    block @else display: none TRANSITION SETUP • Opacity transition for modern browsers • Hide/show for IE8 Sass 20 Thursday, March 15, 12
  56. =transition-setup($value) opacity: $value .ie8 & @if $value >= 0.5 display:

    block @else display: none TRANSITION SETUP • Opacity transition for modern browsers • Hide/show for IE8 Sass .hidden-element +transition-setup(0) .visible-element +transition-setup(.5) 20 Thursday, March 15, 12
  57. =transition-setup($value) opacity: $value .ie8 & @if $value >= 0.5 display:

    block @else display: none TRANSITION SETUP • Opacity transition for modern browsers • Hide/show for IE8 Sass .hidden-element { opacity: 0; } .ie8 .foo { display: none; } .visible-element { opacity: 0.5; } .ie8 .bar { display: block; } CSS .hidden-element +transition-setup(0) .visible-element +transition-setup(.5) 20 Thursday, March 15, 12
  58. $geoforms-small-text: 1em !default $geoforms-medium-text: 1.2em !default =geoforms ul line-height: 1

    padding-left: 0 margin: 0 font-size: $geoforms-medium-text color: $gray-dark li display: block padding: 6px 0 4px 120px border-top: 1px solid #eee overflow: hidden &:first-child border-top: none label line-height: 20px +text-shadow($white 0 1px 0) &:first-child float: left width: 100px margin-left: -120px font-weight: bold padding-left: 10px // 75 more lines of form awesomeness… SHARING • Extract common elements • Reuse them in your project or between projects • Distribute it! Sass 21 Thursday, March 15, 12
  59. =my-btn($color) color: $color +my-btn(red) @mixin my-btn($color) { color: $color; }

    @include my-btn(red); SCSS Sass 22 Thursday, March 15, 12
  60. @EXTEND 23 Thursday, March 15, 12

  61. h1 { font-family: “Gill Sans”, sans-serif; font-size: 2em; color: #222;

    } h2 { @extend h1; font-size: 1.25em; } h1, h2 { font-family: “Gill Sans”, sans-serif; font-size: 2em; color: #222; } h2 { font-size: 1.25em; } EXTEND • Allows reuse of CSS using selector inheritance • Sort of like a mixin in practice SCSS CSS 24 Thursday, March 15, 12
  62. .my-layout { margin: 1px; h1 { font-weight: bold; font-size: 2em;

    } h2 { @extend h1; font-size: 1.5em; } } .home-page { @extend .my-layout; } .about-page { @extend .my-layout; } .login-page { @extend .my-layout; } .register-page { @extend .my-layout; } SCSS Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 25 Thursday, March 15, 12
  63. .my-layout { margin: 1px; h1 { font-weight: bold; font-size: 2em;

    } h2 { @extend h1; font-size: 1.5em; } } .home-page { @extend .my-layout; } .about-page { @extend .my-layout; } .login-page { @extend .my-layout; } .register-page { @extend .my-layout; } SCSS .my-layout, .home-page, .about-page, .login-page, .register-page { margin: 1px; } .my-layout h1, .home-page h1, .about-page h1, .login-page h1, .register-page h1, .my-layout h2, .home-page .my-layout h2, .my-layout .home-page h2, .about-page .my-layout h2, .my- layout .about-page h2, .login-page .my-layout h2, .my- layout .login-page h2, .register-page .my-layout h2, .my- layout .register-page h2, .my-layout .home-page h2, .home- page .my-layout h2, .home-page h2, .about-page .home-page h2, .home-page .about-page h2, .login-page .home-page h2, .home- page .login-page h2, .register-page .home-page h2, .home- page .register-page h2, .my-layout .about-page h2, .about- page .my-layout h2, .home-page .about-page h2, .about-page .home- page h2, .about-page h2, .login-page .about-page h2, .about- page .login-page h2, .register-page .about-page h2, .about- page .register-page h2, .my-layout .login-page h2, .login- page .my-layout h2, .home-page .login-page h2, .login-page .home- page h2, .about-page .login-page h2, .login-page .about-page h2, .login-page h2, .register-page .login-page h2, .login- page .register-page h2, .my-layout .register-page h2, .register- page .my-layout h2, .home-page .register-page h2, .register- page .home-page h2, .about-page .register-page h2, .register- page .about-page h2, .login-page .register-page h2, .register- page .login-page h2, .register-page h2 { font-weight: bold; font-size: 2em; } .my-layout h2, .home-page h2, .about-page h2, .login-page h2, .register-page h2 { font-size: 1.5em; } CSS Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 25 Thursday, March 15, 12
  64. .my-layout { margin: 1px; h1 { font-weight: bold; font-size: 2em;

    } h2 { @extend h1; font-size: 1.5em; } } .home-page { @extend .my-layout; } .about-page { @extend .my-layout; } .login-page { @extend .my-layout; } .register-page { @extend .my-layout; } SCSS .my-layout, .home-page, .about-page, .login-page, .register-page { margin: 1px; } .my-layout h1, .home-page h1, .about-page h1, .login-page h1, .register-page h1, .my-layout h2, .home-page .my-layout h2, .my-layout .home-page h2, .about-page .my-layout h2, .my- layout .about-page h2, .login-page .my-layout h2, .my- layout .login-page h2, .register-page .my-layout h2, .my- layout .register-page h2, .my-layout .home-page h2, .home- page .my-layout h2, .home-page h2, .about-page .home-page h2, .home-page .about-page h2, .login-page .home-page h2, .home- page .login-page h2, .register-page .home-page h2, .home- page .register-page h2, .my-layout .about-page h2, .about- page .my-layout h2, .home-page .about-page h2, .about-page .home- page h2, .about-page h2, .login-page .about-page h2, .about- page .login-page h2, .register-page .about-page h2, .about- page .register-page h2, .my-layout .login-page h2, .login- page .my-layout h2, .home-page .login-page h2, .login-page .home- page h2, .about-page .login-page h2, .login-page .about-page h2, .login-page h2, .register-page .login-page h2, .login- page .register-page h2, .my-layout .register-page h2, .register- page .my-layout h2, .home-page .register-page h2, .register- page .home-page h2, .about-page .register-page h2, .register- page .about-page h2, .login-page .register-page h2, .register- page .login-page h2, .register-page h2 { font-weight: bold; font-size: 2em; } .my-layout h2, .home-page h2, .about-page h2, .login-page h2, .register-page h2 { font-size: 1.5em; } CSS danger Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 25 Thursday, March 15, 12
  65. .aaa .bbb .ccc { margin: 1px; } .xxx .yyy .zzz

    { @extend .ccc; } .aaa .bbb .ccc, .aaa .bbb .xxx .yyy .zzz, .xxx .yyy .aaa .bbb .zzz { margin: 1px; } DANGERS • Pay attention to CSS output; because, • Selector length can grow wildly out of control • This is less of an issue than it was SCSS CSS Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 26 Thursday, March 15, 12
  66. ORGANIZATION 27 Thursday, March 15, 12

  67. /* Reset CSS */ *{padding:0;margin:0} /* Global Styles */ h1{}

    p{} /* Layout Styles */ .wrapper{} .sidebar{} /* Page-Specific Styles */ .home-page h1{} .about-page h1{} .contact-page h1{} screen.css CSS 28 Thursday, March 15, 12
  68. /* Reset CSS */ *{padding:0;margin:0} /* Global Styles */ h1{}

    p{} /* Layout Styles */ .wrapper{} .sidebar{} /* Page-Specific Styles */ .home-page h1{} .about-page h1{} .contact-page h1{} screen.css CSS CSS Comments 28 Thursday, March 15, 12
  69. /* Reset CSS */ @import "reset.css"; /* Global Styles */

    @import "global.css"; /* Layout Styles */ @import "layout.css"; /* Page-Specific Styles */ @import "pages/home.css"; @import "pages/about.css"; @import "pages/contact.css"; screen.css CSS 29 Thursday, March 15, 12
  70. /* Reset CSS */ @import "reset.css"; /* Global Styles */

    @import "global.css"; /* Layout Styles */ @import "layout.css"; /* Page-Specific Styles */ @import "pages/home.css"; @import "pages/about.css"; @import "pages/contact.css"; screen.css CSS danger excessive http requests 29 Thursday, March 15, 12
  71. html <!-- Reset CSS --> <link rel="stylesheet" href="reset.css"> <!-- Global

    Styles --> <link rel="stylesheet" href="global.css"> <!-- Layout Styles --> <link rel="stylesheet" href="layout.css"> <!-- Page-Specific Styles --> <link rel="stylesheet" href="pages/about.css"> about.html 30 Thursday, March 15, 12
  72. html <!-- Reset CSS --> <link rel="stylesheet" href="reset.css"> <!-- Global

    Styles --> <link rel="stylesheet" href="global.css"> <!-- Layout Styles --> <link rel="stylesheet" href="layout.css"> <!-- Page-Specific Styles --> <link rel="stylesheet" href="pages/about.css"> about.html danger excessive http requests 30 Thursday, March 15, 12
  73. /* Reset CSS */ *{padding:0;margin:0} /* Global Styles */ h1{}

    p{} /* Layout Styles */ .wrapper{} .sidebar{} /* Page-Specific Styles */ .home-page h1{} .about-page h1{} .contact-page h1{} screen.css CSS 31 Thursday, March 15, 12
  74. // Reset CSS * padding: 0 margin: 0 // Global

    Styles h1 /* styles here */ p /* styles here */ // Layout Styles .wrapper /* styles here */ .sidebar /* styles here */ // Page-Specific Styles .home-page h1 color: red screen.sass Sass 32 Thursday, March 15, 12
  75. // Reset CSS @import reset // Global Styles h1 /*

    styles here */ p /* styles here */ // Layout Styles .wrapper /* styles here */ .sidebar /* styles here */ // Page-Specific Styles .home-page h1 color: red .about-page h1 color: white screen.sass Sass // Reset CSS * padding: 0 margin: 0 _reset.sass 33 Thursday, March 15, 12
  76. // Reset CSS @import reset // Global Styles @import global

    // Layout Styles .wrapper /* styles here */ .sidebar /* styles here */ // Page-Specific Styles .home-page h1 color: red .about-page h1 color: white .contact-page h1 color: blue screen.sass Sass // Global Styles h1 /* styles here */ p /* styles here */ _global.sass 34 Thursday, March 15, 12
  77. // Reset CSS @import reset // Global Styles @import global

    // Layout Styles @import layout // Page-Specific Styles .home-page h1 color: red .about-page h1 color: white .contact-page h1 color: blue screen.sass Sass // Layout Styles .wrapper /* styles here */ .sidebar /* styles here */ _layout.sass 35 Thursday, March 15, 12
  78. // Reset CSS @import reset // Global Styles @import global

    // Layout Styles @import layout // Page-Specific Styles .home-page @import home .about-page @import about-page .contact-page @import contact-page screen.sass Sass 36 Thursday, March 15, 12
  79. // Page-Specific Styles .home-page @import home screen.sass Sass 37 Thursday,

    March 15, 12
  80. // Page-Specific Styles .home-page @import home screen.sass Sass // home

    page styles h1 color: red p color: blue _home.sass 37 Thursday, March 15, 12
  81. // Page-Specific Styles .home-page @import home screen.sass Sass screen.css .home-page

    h1 { color: red; } .home-page p { color: blue; } // home page styles h1 color: red p color: blue _home.sass CSS 37 Thursday, March 15, 12
  82. // Page-Specific Styles .home-page @import home screen.sass Sass screen.css .home-page

    h1 { color: red; } .home-page p { color: blue; } // home page styles h1 color: red p color: blue _home.sass CSS css/ screen.css sass/ _home.sass screen.sass 37 Thursday, March 15, 12
  83. PARTIALS • Faster Sass compilation • Shareable components • Explicit

    definition of purpose • DRY css/ screen.css sass/ _global.sass _layout.sass _reset.sass screen.sass 38 Thursday, March 15, 12
  84. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  85. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  86. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  87. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  88. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  89. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  90. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  91. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  92. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  93. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  94. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  95. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  96. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  97. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  98. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  99. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  100. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  101. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  102. // Public Styles // All styles included in the following

    partials should have low specificity // such that page-specific stylesheets can extend (or override) these styles // Libraries @import compass @import public/config @import public/reset @import shared/avantgarde @import public/mixins @import public/sprites @import shared/payment_types // Typography @import public/type_styles @import public/type_layout @import public/links @import public/pagination PARTIAL STRATEGY Sass // Layout @import public/layout @import public/lightbox @import public/images // Forms @import public/form_styles @import public/form_layout @import public/messaging 39 Thursday, March 15, 12
  103. CONTROL LOGIC Loops, etc. 40 Thursday, March 15, 12

  104. <div class="pseudo-meter value-2">2</div> <div class="pseudo-meter value-1">1</div> <div class="pseudo-meter value-5">5</div> .pseudo-meter

    { display: block; height: 20px; text-indent: -9999px; background-color: gray; @for $i from 0 through 10 { &.value-#{$i} { width: $i * 10%; @if $i > 7 { background-color: red; } } } } .pseudo-meter.value-0 { width: 0%; } .pseudo-meter.value-1 { width: 20%; } .pseudo-meter.value-2 { width: 40%; } .pseudo-meter.value-3 { width: 60%; } .pseudo-meter.value-4 { width: 80%; } .pseudo-meter.value-5 { width: 100%; } • Simple “meter-like” element • Change color above certain threshold SCSS CSS html 41 Thursday, March 15, 12
  105. @mixin pseudo-meter($height, $limit: 7) { display: block; height: $height; text-indent:

    -9999px; background-color: gray; @for $i from 0 through 10 { &.value-#{$i} { width: $i * 10%; @if $i > $limit { background-color: red; } } } } .pseudo-meter (@height, @limit: 7) { display: block; height: @height; text-indent: -9999px; background-color: gray; .bg (@i) when (@i > @limit) { background-color: red; } .bg (@i) {} .loop (@i) when (@i > 0) { (~”.value-@{i}”) { width: @i * 10%; .bg(@i); } .loop(@i - 1); } .loop (0) {} .loop(10); } LESS SCSS 42 Thursday, March 15, 12
  106. ADVANCED LANGUAGE FEATURES 43 Thursday, March 15, 12

  107. .mixin (@a) when (lightness(@a) > 50%) { background-color: black; }

    .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } GUARDS • expression matching • declarative • looks like @media LESS 44 Thursday, March 15, 12
  108. .mixin (@a) when (isnumber(@a)) { /* some stuff */ }

    .mixin (@a) when (iscolor(@a)) { /* some stuff */ } .mixin (@a) when (isurl(@a)) { /* some stuff */ } .mixin (@a) when (ispercentage(@a)) { /* some stuff */ } TYPE CHECKING • unit types • px, %, em • entitity types • color, #, str, etc… LESS 45 Thursday, March 15, 12
  109. .mixin (12) { background-color: black; } .mixin (@fat) { background-color:

    black; } .mixin (...) { background-color: black; } PATTERN MATCHING • conditional execution • based on arguments • varargs (v1.3+) NEW! LESS 46 Thursday, March 15, 12
  110. LIBRARIES Compass, Fancy Buttons, Formalize, etc 47 Thursday, March 15,

    12
  111. 48 Thursday, March 15, 12

  112. NEW! Compass v0.12 Released March 12th (yesterday) 48 Thursday, March

    15, 12
  113. li.error { background-color: #fdd; border-top-color: #fff; @include background-image(linear-gradient( left, #fff9f9,

    #ffeeee 20%, #ffeeee 80%, #fff9f9 )); } li.error { background-color: #ffdddd; border-top-color: white; background-image: -webkit-gradient( linear, 0% 50%, 100% 50%, color-stop(0%, #fff9f9), color-stop(20%, #ffeeee), color-stop(80%, #ffeeee), color-stop(100%, #fff9f9) ); background-image: -moz-linear-gradient( left, #fff9f9, #ffeeee 20%, #ffeeee 80%, #fff9f9 ); background-image: linear-gradient( left, #fff9f9, #ffeeee 20%, #ffeeee 80%, #fff9f9 ); } CSS3 • Use CSS3 now! • Single, common syntax • Let the Compass team worry about browser support SCSS CSS 49 Thursday, March 15, 12
  114. @import "compass/css3" @import "compass/css3/border-radius"; @import "compass/css3/inline-block"; @import "compass/css3/opacity"; @import "compass/css3/box-shadow";

    @import "compass/css3/text-shadow"; @import "compass/css3/columns"; @import "compass/css3/box-sizing"; @import "compass/css3/box"; @import "compass/css3/gradient"; @import "compass/css3/images"; @import "compass/css3/background-clip"; @import "compass/css3/background-origin"; @import "compass/css3/background-size"; @import "compass/css3/font-face"; @import "compass/css3/transform"; @import "compass/css3/transition"; @import "compass/css3/appearance"; JUST DO THIS SCSS 50 Thursday, March 15, 12
  115. nav { background: image-url("nav_bg.png"); } .logo { background: inline-image("logo.png"); }

    nav { background: url(/images/nav_bg.png); } .logo { background: url( data:image/png;base64,iVBORw0KGgo...); } nav { background: url( http://cdn.example.com/images/nav_bg.png); } .logo { background: url( data:image/png;base64,iVBORw0KGgo...); } URL HELPERS • Relative paths for assets in development, absolute for production CDNs • Inline images and fonts Dev PRO SCSS CSS 51 Thursday, March 15, 12
  116. #{headings()} { line-height: 1.25em; } #{headings(2,6)} { font-weight: normal; }

    #{elements-of-type(block)} { margin: 10px 0; } h1,h2,h3,h4,h5,h6 { line-height: 1.25em; } h2,h3,h4,h5,h6 { font-weight: normal; } address, article, aside, blockquote, center, dd, details, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, frameset, h1, h2, h3, h4, h5, h6, header, hgroup, hr, isindex, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul { margin: 10px 0; } UTILITY HELPERS • Headings: all or range • Elements of type: inline, block, html5-inline, html5-block, more SCSS CSS 52 Thursday, March 15, 12
  117. rgba($color, $alpha) Adds an alpha layer to any color value.

    mix($color-1, $color-2, [$weight]) Mixes two colors together. hsla($color, $alpha) Adds an alpha layer to any color value. lighten($color, $amount) Makes a color lighter. darken($color, $amount) Makes a color darker. saturate($color, $amount) Makes a color more saturated. desaturate($color, $amount) Makes a color less saturated. grayscale($color) Converts a color to grayscale. complement($color) Returns the complement of a color. invert($color) Returns the inverse of a color. COLOR FUNCTIONS • Add alpha to hex • Work in HSL, support IE • Find safe colors automagically 53 Thursday, March 15, 12
  118. @import "compass/typography/vertical_rhythm"; $base-font-size: 16px; $base-line-height: 24px; @include establish-baseline; body {

    font-family: 'Helvetica Neue', sans-serif; @include debug-vertical-alignment( "../images/debug.png"); } h1 {@include adjust-font-size-to(48px)} h2 {@include adjust-font-size-to(36px)} h3 {@include adjust-font-size-to(24px)} h4 {@include adjust-font-size-to(20px)} h5 {@include adjust-font-size-to(18px)} p {@include leader; @include trailer;} h2.important {@include leader(2); @include trailer(2)} TYPOGRAPHY • Vertical rhythm • Add padding, margin in rhythm units SCSS 54 Thursday, March 15, 12
  119. 55 Thursday, March 15, 12

  120. @mixin border-radius ($radii) { -webkit-border-radius: $radii; -moz-border-radius: $radii; border-radius: $radii;

    } @function golden-ratio(($value, $increment) { @return modular-scale($value, $increment, 1.618) } div { font-size: modular-scale(14px, 1, 1.618); } div { font-size: 22.652px; } MORE VANILLA CSS3 • No syntax abstraction • Use shorthands • A few added functions • Simply patterns, no packaging SCSS CSS 56 Thursday, March 15, 12
  121. SPRITES 57 Thursday, March 15, 12

  122. SPRITES 58 Thursday, March 15, 12

  123. SPRITES 58 Thursday, March 15, 12

  124. SPRITES • Fewer images = fewer http requests 58 Thursday,

    March 15, 12
  125. SPRITES • Fewer images = fewer http requests • How

    many? 58 Thursday, March 15, 12
  126. SPRITES • Fewer images = fewer http requests • How

    many? • HTML element? 58 Thursday, March 15, 12
  127. SPRITES • Fewer images = fewer http requests • How

    many? • HTML element? <div> or <i> HTML 58 Thursday, March 15, 12
  128. SPRITES • Fewer images = fewer http requests • How

    many? • HTML element? <div> or <i> // <i> is a sprite container i display: block HTML Sass 58 Thursday, March 15, 12
  129. <i class="card-visa"></i> HTML SPRITES 59 Thursday, March 15, 12

  130. <i class="card-visa"></i> HTML SPRITES american-express.png discover.png mastercard.png visa.png card 59

    Thursday, March 15, 12
  131. $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites <i class="card-visa"></i> HTML SASS SPRITES

    american-express.png discover.png mastercard.png visa.png card 59 Thursday, March 15, 12
  132. $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites <i class="card-visa"></i> HTML card-s1234567890.png SASS

    SPRITES american-express.png discover.png mastercard.png visa.png card 59 Thursday, March 15, 12
  133. SPRITES <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites

    60 Thursday, March 15, 12
  134. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background:

    url('../images/card-s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; height: 22px; width: 32px; } .card-discover { background-position: 0 -66px; height: 22px; width: 32px; } .card-mastercard { background-position: 0 0; height: 22px; width: 32px; } .card-visa { background-position: 0 -44px; height: 22px; width: 32px; } <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites 60 Thursday, March 15, 12
  135. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background:

    url('../images/card-s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; height: 22px; width: 32px; } .card-discover { background-position: 0 -66px; height: 22px; width: 32px; } .card-mastercard { background-position: 0 0; height: 22px; width: 32px; } .card-visa { background-position: 0 -44px; height: 22px; width: 32px; } danger Duplicated dimensions <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites 60 Thursday, March 15, 12
  136. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background:

    url('../images/card-s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; height: 22px; width: 32px; } .card-discover { background-position: 0 -66px; height: 22px; width: 32px; } .card-mastercard { background-position: 0 0; height: 22px; width: 32px; } .card-visa { background-position: 0 -44px; height: 22px; width: 32px; } danger Duplicated dimensions <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites 60 Thursday, March 15, 12
  137. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background:

    url('../images/card-s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; height: 22px; width: 32px; } .card-discover { background-position: 0 -66px; height: 22px; width: 32px; } .card-mastercard { background-position: 0 0; height: 22px; width: 32px; } .card-visa { background-position: 0 -44px; height: 22px; width: 32px; } <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites 60 Thursday, March 15, 12
  138. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background:

    url('../images/card-s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; height: 22px; width: 32px; } .card-discover { background-position: 0 -66px; height: 22px; width: 32px; } .card-mastercard { background-position: 0 0; height: 22px; width: 32px; } .card-visa { background-position: 0 -44px; height: 22px; width: 32px; } <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png" +all-card-sprites 61 Thursday, March 15, 12
  139. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png"

    +all-card-sprites 61 Thursday, March 15, 12
  140. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-sprite-dimensions: true @import "card/*.png"

    +all-card-sprites 61 Thursday, March 15, 12
  141. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width:

    image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 62 Thursday, March 15, 12
  142. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width:

    image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 62 Thursday, March 15, 12
  143. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width:

    image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 62 Thursday, March 15, 12
  144. CSS SPRITES <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width:

    image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 63 Thursday, March 15, 12
  145. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { width:

    32px; height: 22px; } .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background: url('../images/card- s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; } .card-discover { background-position: 0 -66px; } .card-mastercard { background-position: 0 0; } .card-visa { background-position: 0 -44px; } <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width: image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 63 Thursday, March 15, 12
  146. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { width:

    32px; height: 22px; } .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background: url('../images/card- s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; } .card-discover { background-position: 0 -66px; } .card-mastercard { background-position: 0 0; } .card-visa { background-position: 0 -44px; } <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width: image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 63 Thursday, March 15, 12
  147. CSS SPRITES .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { width:

    32px; height: 22px; } .card-sprite, .card-american-express, .card- discover, .card-mastercard, .card-visa { background: url('../images/card- s3c04635c42.png') no-repeat; } .card-american-express { background-position: 0 -22px; } .card-discover { background-position: 0 -66px; } .card-mastercard { background-position: 0 0; } .card-visa { background-position: 0 -44px; } <i class="card-visa"></i> HTML SASS $card-visa-image: "card/visa.png" .card-sprite width: image-width($card-visa-image) height: image-height($card-visa-image) @import "card/*.png" +all-card-sprites 63 Thursday, March 15, 12
  148. HORIZONTALLY CENTERED @import "my-icons/*.png" 64 Thursday, March 15, 12

  149. HORIZONTALLY CENTERED @import "my-icons/*.png" 64 Thursday, March 15, 12

  150. HORIZONTALLY CENTERED $my-icons-position: 50.0% @import "my-icons/*.png" 64 Thursday, March 15,

    12
  151. vertical 65 Thursday, March 15, 12

  152. NEW! Compass v0.12 vertical 65 Thursday, March 15, 12

  153. NEW! Compass v0.12 vertical horizontal 65 Thursday, March 15, 12

  154. NEW! Compass v0.12 vertical horizontal diagonal 65 Thursday, March 15,

    12
  155. NEW! Compass v0.12 vertical horizontal diagonal smart 65 Thursday, March

    15, 12
  156. NEW! Compass v0.12 vertical horizontal diagonal smart 65 Thursday, March

    15, 12
  157. lesscss.org sass-lang.com compass-style.org 66 Thursday, March 15, 12

  158. fin @beau @pengwynn @xeeton @fat 67 Thursday, March 15, 12