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

vedanova

July 19, 2013
Tweet

More Decks by vedanova

Other Decks in Technology

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