Skip to content

Instantly share code, notes, and snippets.

@rachelnabors
Created December 20, 2013 01:27
Show Gist options
  • Save rachelnabors/8049099 to your computer and use it in GitHub Desktop.
Save rachelnabors/8049099 to your computer and use it in GitHub Desktop.
A Sass/Compass mixin I built for The Black Brick Road's latest installment.
// All the little mixins that will go into one BIG mixin.
// Hey, might need them!
@mixin set-dimensions($width, $height, $parent-width) {
@include background-size(100% auto);
width: percentage($width/$parent-width);
padding-top: percentage($height/$parent-width);
height: 0;
}
@mixin set-width($width, $parent-width) {
@include background-size(100% auto);
width: percentage($width/$parent-width);
}
@mixin set-position($sX, $sY, $parent-width, $parent-height) {
left: percentage($sX/$parent-width);
top: percentage($sY/$parent-height);
}
@mixin set-bg-width($sprites-width, $sprite, $sprite-image) {
$spriteX: percentage($sprites-width / image-width(sprite-file($sprite, $sprite-image)));
@include background-size($spriteX auto);
}
// The BIG mixin that generates styles for both the droppable "dirty" item
// and the "clean" place where it belongs
@mixin create-item($item, $sX, $sY, $placeX, $placeY, $parent-width: $house-width, $parent-height: $frame-height) {
// Check for existence of ITEM-place sprite. Make .ITEM-place bg rules in that event.
.#{$item} {
$iWidth: image-width(sprite-file($items-sprite, #{$item}-dirty));
$iHeight: image-height(sprite-file($items-sprite, #{$item}-dirty));
@include set-dimensions($iWidth, $iHeight, $parent-width);
@include set-position($sX, $sY, $parent-width, $parent-height);
@include set-bg-width($items-sprite-width, $items-sprite, #{$item}-dirty);
@extend %items;
}
.#{$item}-place {
// If there's a background image for this already...
@if index(sprite-names($items-sprite), #{$item}-place) {
@include items-sprite(#{$item}-place);
}
$iWidth: image-width(sprite-file($items-sprite, #{$item}-place));
$iHeight: image-height(sprite-file($items-sprite, #{$item}-place));
@include set-dimensions($iWidth, $iHeight, $parent-width);
@include set-position($placeX, $placeY, $parent-width, $parent-height);
@include set-bg-width($items-sprite-width, $items-sprite, #{$item}-place);
@extend %place;
}
.#{$item}-place.droppable {
@include items-sprite(#{$item}-hover);
}
.#{$item}-place.clean {
@include items-sprite(#{$item}-clean);
}
}
// Call it like so:
@include create-item(socks, 575px, 186px, 686px, 141px);
@rachelnabors
Copy link
Author

Here's what it spits out:

  .socks {
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    width: 4.11862%;
    padding-top: 4.94234%;
    height: 0;
    left: 47.36409%;
    top: 18.6%;
    -webkit-background-size: 506.0% auto;
    -moz-background-size: 506.0% auto;
    -o-background-size: 506.0% auto;
    background-size: 506.0% auto;
  }

  .socks-place {
    background-position: 0 92.82165%;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    width: 11.69687%;
    padding-top: 9.2257%;
    height: 0;
    left: 56.50741%;
    top: 14.1%;
    -webkit-background-size: 178.16901% auto;
    -moz-background-size: 178.16901% auto;
    -o-background-size: 178.16901% auto;
    background-size: 178.16901% auto;
  }

  .socks-place.droppable {
    background-position: 0 91.27554%;
  }

  .socks-place.clean {
    background-position: 0 88.90116%;
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment