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:
goo.gl/eWZKu

Transcript

1. SASS / COMPASS / SPRITES
   

   View Slide

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

   View Slide

3. Disclaimer
   I don't use animated gifs in my
   presentations
   ... people seem to love them
   

   View Slide

4. TOPICS
   SASS Overview
   Compass
   Spriting
   Beispiele
   

   View Slide

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
   

   View Slide

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; }
   

   View Slide

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
   

   View Slide

8. VARIABLES
   GIVE VARIABLES A MEANINGFUL NAME
   Bad: $blue-1
   Good: $section-header-blue
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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;
    

    View Slide

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 {
    

    View Slide

13. MIXINS
    Reusable blocks of code
    Write once, use everywhere
    Take arguments
    ... set defaults
    

    View Slide

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;
    

    View Slide

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;
    }
    

    View Slide

16. USE COMPASS PREDEFINED
    avoids missing browser flags
    prevents spelling errors
    new browser flags are added (update)
    

    View Slide

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);
    

    View Slide

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)
    

    View Slide

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"
    

    View Slide

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
    

    View Slide

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;
    

    View Slide

22. CONTROL LOGIC
    @if
    @for
    @each
    @while
    

    View Slide

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%;
    

    View Slide

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;
    

    View Slide

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;
    }
    

    View Slide

26. COMPASS
    

    View Slide

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

    View Slide

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"
    

    View Slide

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);
    

    View Slide

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 {
    

    View Slide

31. CSS3
    gotchas!
    IE < 10 won't rotate arrow!
    Make sure it works on IE
    ...
    maybe its acceptable that it won't work
    

    View Slide

32. SPRITES
    

    View Slide

33. SPRITES
    

    View Slide

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

    View Slide

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!
    

    View Slide

36. SPRITES
    +all-flags-sprites
    

    View Slide

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 !!
    

    View Slide

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;
    }
    

    View Slide

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;}
    

    View Slide

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 {
    

    View Slide

41. SPRITES
    Sprite container
    
    

    View Slide

42. SPRITE LAYOUTS
    vertical (default)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. EXAMPLES
    

    View Slide

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

    View Slide