Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SASS Compass Spriting Introduction

SASS Compass Spriting Introduction

Intro into SASS and Compass and how to use Sprites.

Unfortunately while exported into PDF the vertical columns where converted to horizontal ones. Find the original here:



July 19, 2013



  2. ME Christoph Klocker Coder Rubyist love Rails Find me: @corck

  3. Disclaimer I don't use animated gifs in my presentations ...

    people seem to love them
  4. TOPICS SASS Overview Compass Spriting Beispiele

  5. SASS - SCSS #sass // variables $default_width: 500px $sidebar_width: 150px

    // mixins @mixin box($width: 100px) width: $width .default_box +box($default_width) //nesting .content #sidebar width: $default_width &.wide width: $default_width + 20 #scss // variables $default_width: 500px; $sidebar_width: 150px; // mixins
  6. VARIABLES #CSS h1 { font-family: Helvetica, sans-serif; font-size: 1.5em; color:

    #999999; } h2 { font-family: Helvetica, sans-serif; font-size: 1.2em; color: #999999; } p { font-family: Times, serif; font-size: 1em; color: #111111; }
  7. VARIABLES #CSS h1 { font-family: Helvetica, sans-serif; font-size: 1.5em; color:

    #999999; } h2 { font-family: Helvetica, sans-serif; font-size: 1.2em; color: #999999; } p { font-family: Times, serif; font-size: 1em; color: #111111; } #SASS $base-font-size: 1em $base-font: Times, serif $headline-font: Helvetica, sans-serif $headline-color: #999999
  8. VARIABLES GIVE VARIABLES A MEANINGFUL NAME Bad: $blue-1 Good: $section-header-blue

  9. COLORS Group them in a single spot Name them meaningful

    // brand colors $logo-blue: #333 $blue: #444 $lighter-blue: #0758d9 $headline-blue: #021c45 // buttons // confirm button $button-main-border: #555
  10. COLOR FUNCTIONS provided by COMPASS // brand colors $logo-blue: #333

    $blue: #043076 $lighter-blue: lighten($blue, 20%) $headline-blue: darken($blue, 10%) // buttons // confirm-button $confirm-button-color: $blue $confirm-button-top: lighten($confirm-button, 15%) $confirm-button-bottom: darken($confirm-button, 10%) .confirm-btn border: 1px border-bottom-color: $confirm-button-bottom border-top-color: $confirm-button-top background-color: $confirm-button-color
  11. NESTING #SASS .content background-color: #fff .row width: 1024px .span12 section

    padding: 12px aside 200px color: #f4f4f4 article 824px #headline font-size: 16pt #CSS .content { background-color: white; } .content .row { width: 1024px; } .content .row .span12 section { padding: 12px; } .content .row .span12 section aside { color: #f4f4f4;
  12. NESTING - SELECTORS #SASS article p font-size: 12pt .green color:

    green &.blue color: blue + .black color: #000000 > small font-size: 8pt &:hover color: red #CSS article p { font-size: 12pt; } article p .green { color: green; } article p.blue { color: blue; } article p + .black { color: black; } article p > small { font-size: 8pt; } article p:hover {
  13. MIXINS Reusable blocks of code Write once, use everywhere Take

    arguments ... set defaults
  14. MIXINS #SASS =rounded($vert, $horz, $radius: 10px) border-#{$vert}-#{$horz}-radius: $radius -moz-border-radius-#{$vert}#{$horz}: $radius

    -webkit-border-#{$vert}-#{$horz}-radius: $radius $top: 3px $left: 3px .rounded +rounded(top, left) .widget +rounded(bottom, right) nav +rounded(top, left, 5px) footer // @include does work as well in SASS @include rounded(top, left, 8px) #CSS .rounded { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
  15. USE COMPASS PREDEFINED #SASS @import "compass/css3" $top: 3px $left: 3px

    .compass-border +border-radius(4px, 4px) #CSS .compass-border { -webkit-border-radius: 3px 3px; -moz-border-radius: 3px / 3px; border-radius: 3px / 3px; }
  16. USE COMPASS PREDEFINED avoids missing browser flags prevents spelling errors

    new browser flags are added (update)
  17. SASS-SCSS Mixin syntax #SASS =rounded($vert, $horz, $radius: 10px) border-#{$vert}-#{$horz}-radius: $radius

    -moz-border-radius-#{$vert}#{$horz}: $radius -webkit-border-#{$vert}-#{$horz}-radius: $radius .rounded +rounded(5px, 5px) // or .rounded @include rounded(5px, 5px) #SCSS @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius -moz-border-radius-#{$vert}#{$horz}: $radius -webkit-border-#{$vert}-#{$horz}-radius: $radius } .rounded { @include rounded(5px, 5px);
  18. @IMPORT split code into files for easier maintenance /* partials/_rounded.sass

    */ =rounded($vert, $horz, $radius: 10px) border-#{$vert}-#{$horz}-radius: $radius -moz-border-radius-#{$vert}#{$horz}: $radius -webkit-border-#{$vert}-#{$horz}-radius: $radius /* screen.sass */ @import "partials/rounded" .rounded +rounded(5px, 5px) // or .rounded @include rounded(5px, 5px)
  19. FILE STRUCTURE partials/_mixins.sass partials/_button_mixins.sass partials/_variables.sass partials/_bootstrap_and_overrides.sass admin/base.sass admin/billing/index.sass admin/billing/show.sass _sessions.sass

    _base.sass application.sass /* application.sass */ @import "partials/variables" @import "partials/mixins" @import "partials/boostrap_and_overrides @import "base" @import "admin/base" @import "sessions" /* admin.sass */ @import "billing/index" @import "billing/show"
  20. @IMPORT allows to mix SCSS and SASS -> reuse of

    existing libraries partials/_mixins.sass vendor/_fancy_buttons.scss application.sass /* application.sass */ @import "partials/mixins" @import "partials/fancy_buttons
  21. @EXTEND #sass $header-font: Arial $font-size: 1em .header-style font: $header-font h1

    @extend .header-style font-size: $font-size * 2 color: #999 h2 @extend h1 font-size: $font-size * 1.2 #css .header-style, h1, h2 { font: Arial; } h1, h2 { font-size: 2em; color: #999999; } h2 { font-size: 1.2em;
  22. CONTROL LOGIC @if @for @each @while

  23. @FOR/@IF Progress bar #sass .progress-bar @for $i from 0 through

    5 &.value-#{$i} width: $i * 20% @if $i > 4 background-color: green #css .progress-bar { background-color: yellow;} .progress-bar.value-0 {width: 0%;} .progress-bar.value-1 { width: 20%;} .progress-bar.value-2 { width: 40%;} .progress-bar.value-3 { width: 60%;} .progress-bar.value-4 { width: 80%; } .progress-bar.value-5 { width: 100%;
  24. @IF #sass =height($height) height: $height // golden ratio line-height: floor($height

    / 1.618) =dimensions($width, $height, $keep_line_height: false) @if $keep_line_height == true height: $height @else +height($height) width: $width // with line-height .article-tooltip +dimensions(15px, 30px) // without line-height .table-tooltip +dimensions(15px, 25px, true) #css .article-tooltip { height: 30px; line-height: 18px; width: 15px;
  25. INTERPOLATIONS #sass @import "compass/utilities/sprites" @import "arrows/*.png" =arrow($direction) @include arrows-sprites("arrow-#{$direction}") .arrow-left

    +arrow('left') .arrow-right +arrow('right') #css .arrows-sprite, .arrow-left .arrows-arrow-left { background: url('/images/arrows-s52f1520c5a.png') no-repeat; } .arrow-left .arrows-arrow-left { background-position: 0 0; } .arrow-right .arrows-arrow-right { background-position: 0 -100px; }

  27. COMPASS Pre defined mixins Cross browser support CSS3 made easy

    Sprites Utilities Reset
  28. RESET Resets all browser elements so that there is not

    default styling previously Yahoo Reset? Reset CSS by Mayer? others?? Which one to choose now: @import "compass/reset"
  29. COMPASS / CSS3 easy to implement CSS3 functionality accross browsers

    #sass .rotate-90 +rotate(90deg) .rotate-180 +rotate(180deg) #css .rotate-90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);} .rotate-180 { -webkit-transform: rotate(180deg);
  30. CSS3 #sass =arrow-rotate($direction) @if $direction == right +rotate(180deg) +arrows-sprites("arrow") =arrow($direction)

    +arrows-sprites("arrow-#{$direction}") .arrow-right +arrow-rotate('right') #css .arrows-sprite, .arrow-right .arrows-arrow { background: url('/images/arrows-sda52872692.png') no-repeat; } .arrow-right {
  31. CSS3 gotchas! IE < 10 won't rotate arrow! Make sure

    it works on IE ... maybe its acceptable that it won't work


  34. Fewer images == fewer requests WHY SPRITES => Faster Websites

  35. SPRITES creating sprites is really easy with compass /* Place

    your imgs into a folder */ ./images/flags ./images/flags/flag_de.png ./images/flags/flag_en.png ./images/flags/flag_fr.png Import them like this @import "flags/*.png" +all-flags-sprites PNG only!
  36. SPRITES +all-flags-sprites

  37. SPRITES generates: #CSS .flags-sprite, .flags-flag_de, .flags-flag_en, .flags-flag_es, .flags-flag_fr { background:

    url('/images/flags-s22855bd5e5.png') no-repeat;} .flags-flag_de { background-position: 0 -51px;} .flags-flag_en { background-position: 0 0; } .flags-flag_es { background-position: 0 -17px; } .flags-flag_fr { background-position: 0 -34px; } !! For all images in folder a rule will be created !! !! Even if you don't need them !!
  38. SPRITES Better to include individual icons @import "icons/*.png" .german-flag +icons-sprites("flag_de")

    .icons-sprite, .german-flag .icons-flag_de { background: url('/images/icons-s66a0df5e0f.png') no-repeat; } .german-flag .icons-flag_de { background-position: 0 -251px; }
  39. SPRITES $icons-sprite-dimensions #sass $icons-sprite-dimensions: true @import "icons/*.png" .german-flag +icons-sprites("flag_de") .british-flag

    +icons-sprites("flag_en") #css .icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en { background: url('/images/icons-s66a0df5e0f.png') no-repeat; } .german-flag .icons-flag_de { background-position: 0 -251px; height: 17px; width: 25px;}
  40. SPRITES $icons-sprite-dimensions #sass $sample-flag: "flags/flag_de.png" .icons-sprite width: image-width($sample-flag) height: image-height($sample-flag)

    @import "icons/*.png" .german-flag +icons-sprites("flag_de") .british-flag +icons-sprites("flag_en") #css .icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en { width: 25px; height: 17px;} .icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en { background: url('/images/icons-s66a0df5e0f.png') no-repeat;} .german-flag .icons-flag_de { background-position: 0 -251px;} .british-flag .icons-flag_en {
  41. SPRITES Sprite container <i class="german-flag"></i>

  42. SPRITE LAYOUTS vertical (default)

  43. SPRITE LAYOUTS horizontal: $mysprite-layout:horizontal;

  44. SPRITE LAYOUTS Diagonal $mysprite-layout:diagonal;

  45. Most efficient use of browser memory SPRITE LAYOUTS Smart $mysprite-layout:smart;


  47. I couldn't resist ;) @corck www.vedanova.com THANKS