Skip to content

Instantly share code, notes, and snippets.

@dfadler

dfadler/get-sprite.sass

Created July 13, 2012 15:05
Download ZIP

Revisions

  1. dfadler revised this gist Jul 13, 2012. 1 changed file with 0 additions and 13 deletions.
    13 changes: 0 additions & 13 deletions get-sprite.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,3 @@
    @mixin hide-text()
    text-indent: 100%
    white-space: nowrap
    overflow: hidden

    @mixin center-layout($subtract:0)
    margin: auto
    width: $site-width - $subtract

    @mixin center-mobile-layout($subtract:0)
    margin: auto
    width: $mobile-width - $subtract

    // http://compass-style.org/reference/compass/helpers/sprites/
    @mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)

  2. dfadler revised this gist Jul 13, 2012. 1 changed file with 18 additions and 2 deletions.
    20 changes: 18 additions & 2 deletions get-sprite.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,16 @@
    @mixin hide-text()
    text-indent: 100%
    white-space: nowrap
    overflow: hidden

    @mixin center-layout($subtract:0)
    margin: auto
    width: $site-width - $subtract

    @mixin center-mobile-layout($subtract:0)
    margin: auto
    width: $mobile-width - $subtract

    // http://compass-style.org/reference/compass/helpers/sprites/
    @mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)

    @@ -18,10 +31,13 @@
    @if $height == true
    // Gets the height of the sprite-image
    $sprite-height: image-height($sprite-image)
    // Returns the
    // Returns the height
    height: $sprite-height

    // http://compass-style.org/reference/compass/helpers/image-dimensions/
    // Checks to see if the user wants height returned
    @if $width == true
    // Gets the height of the sprite-image
    $sprite-width: image-width($sprite-image)
    width: $sprite-width
    // Returns the width
    width: $sprite-width
  3. dfadler revised this gist Jul 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion get-sprite.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    $sprite-position: sprite-position($map, $sprite)

    // Returns background
    background: $sprite-map $sprite-position
    background: $sprite-map $sprite-position $repeat

    // http://compass-style.org/reference/compass/helpers/image-dimensions/
    // Checks to see if the user wants height returned
  4. dfadler created this gist Jul 13, 2012.
    27 changes: 27 additions & 0 deletions get-sprite.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    // http://compass-style.org/reference/compass/helpers/sprites/
    @mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)

    //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
    $sprite-image: sprite-file($map, $sprite)

    // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
    $sprite-map: sprite-url($map)

    // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
    $sprite-position: sprite-position($map, $sprite)

    // Returns background
    background: $sprite-map $sprite-position

    // http://compass-style.org/reference/compass/helpers/image-dimensions/
    // Checks to see if the user wants height returned
    @if $height == true
    // Gets the height of the sprite-image
    $sprite-height: image-height($sprite-image)
    // Returns the
    height: $sprite-height

    // http://compass-style.org/reference/compass/helpers/image-dimensions/
    @if $width == true
    $sprite-width: image-width($sprite-image)
    width: $sprite-width