Pull an image outside of a grid container and to the edge of the browser using calc()

image-pull.scss

/*
Pull an image outside of a grid container and to the edge of the browser
while maintaining its left or right edge position on the grid.

Requires a calc() polyfill for unsupported browsers.

Recommended polyfill: https://github.com/closingtag/calc-polyfill
Current browser support: http://caniuse.com/#feat=calc
*/

$grid-width: 1100px;
$grid-columns: 12;

@mixin image-pull($span-columns, $position: left, $grid-columns: $grid-columns, $grid-width: $grid-width) {
  // Calculate the percent width of the span of columns the element will occupy
  $percent: ($span-columns/$grid-columns)*$grid-width;

  position: absolute;
  #{$position}: 0;
  width: calc(#{$percent} + ((100% - #{$grid-width})/2));
}

img.pull-left {
  @include image-pull(7)
}
img.pull-right {
  @include image-pull(7, right)
}

/*
<div class="grid-container">
  <img src="image.jpg" class="pull-left" />
</div>
*/