Skip to content

Instantly share code, notes, and snippets.

View kReEsTaL's full-sized avatar

Marie Guillaumet kReEsTaL

32 followers · 21 following
View GitHub Profile
@kReEsTaL
kReEsTaL / Get background-position from Compass magic sprites in em
Last active December 26, 2015 22:19
Get background-position from Compass magic sprites in em
/**
* @subsection Get Sprites position in EM
* @author Marie Guillaumet
*/
@mixin em-sprite-position($map, $sprite, $context: $fs, $offset-x: 0, $offset-y: 0)
{
/** Thank you @pioupiouM! */
$position: sprite-position($map, $sprite, $offset-x, $offset-x);
$x: nth($position, 1);
@kReEsTaL
kReEsTaL / gist:6997214
Last active December 25, 2015 15:19
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;
}
/**
@kReEsTaL
kReEsTaL / gist:6997139
Last active May 3, 2023 08:37
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;
}
/**
@kReEsTaL
kReEsTaL / gist:6997020
Created October 15, 2013 19:09
Compass mixin that lets you specify a background-size in em.
/** @subsection My Background Size Mixin */
/** Pouvoir passer une taille en paramètre en fonction d'un font-size donné */
@mixin my-background-size($width: $margin, $height: $margin, $font-size: $base-font-size)
{
@include background-size( em($width,$font-size) em($height,$font-size) );
}