Skip to content

Instantly share code, notes, and snippets.

@kReEsTaL
Last active May 3, 2023 08:37
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kReEsTaL/6997139 to your computer and use it in GitHub Desktop.
Compass mixin that lets you set a background-size in em, even on a magic sprite image.
/** @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 Background Size in EM
* @author Marie Guillaumet
*/
@mixin em-background-size($image, $context: $fs, $sprite-map: false)
{
@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));
@include background-size( em($image-width,$context) em($image-height,$context) );
}
@else
{
$image-width: image-width($image);
$image-height: image-height($image);
@include background-size( em($image-width,$context) em($image-height,$context) );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment