Skip to content

Instantly share code, notes, and snippets.

@kReEsTaL kReEsTaL/gist:6997214
Last active Dec 25, 2015

Embed
What would you like to do?
Compass mixin that lets you completely specify a background-image in em: background-color, background-image, background-repeat, background-position, in em according to a given context.
/** @subsection EM calculator */
/** cf. https://gist.github.com/ijy/1441967 */
@function em($target, $context: $base-font-size)
{
@if $target == 0 { @return 0 }
@return 1em * $target / $context;
}
/**
* @subsection Full Background in EM
* @author Marie Guillaumet
*
* In case $sprite-map == true, the $image variable must be a sprite's name, e.g. $social-sprites. This variable is automatically generated by Compass when your sprite image is created.
* If $sprite-map == false (default), the $image variable must content a path to an image (e.g.: 'bg/image.png').
*/
@mixin em-background($image, $context: $fs, $sprite-map: false, $repeat: no-repeat, $color: transparent, $position: 0 0)
{
background-color: $color;
background-repeat: $repeat;
@if $sprite-map == true
{
/**
* Let's retrieve the sprite image's dimensions
* @author https://groups.google.com/forum/?fromgroups=#!topic/compass-users/EnGxxzXDZp4
*/
$image-width: image-width(sprite-path($image));
$image-height: image-height(sprite-path($image));
background: $color $image $repeat $position;
@include em-background-size($image, $context, true);
}
@else
{
$image-width: image-width($image);
$image-height: image-height($image);
background: $color image-url($image) $repeat $position;
@include em-background-size($image, $context);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.