Skip to content

Instantly share code, notes, and snippets.

@pospi
Last active January 4, 2016 04:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pospi/8570877 to your computer and use it in GitHub Desktop.
Save pospi/8570877 to your computer and use it in GitHub Desktop.
Calculate sizes in EMs easily by converting from other units
@BASE_FONT_SIZE : 16px;
// translate units by parent element ratio
.emsize(@property, @desired, @base : @BASE_FONT_SIZE) {
@{property}: 1em * (unit(@desired) / unit(@base));
}
// a wrapper for setting font size
.emfz(@desired, @base : @BASE_FONT_SIZE) {
.emsize(font-size, @desired, @base);
}
// another helper which can be used inline. eg- padding: 0 ~`@{toem}(20, 16)`;
@toem: ~`fn = function(a, b) { return (parseFloat(a) / parseFloat(b)) + 'em'; }`;
$BASE_FONT_SIZE : 16px;
@function strip-units($value) {
@return $value / ($value * 0 + 1);
}
// translate units by parent element ratio
@function emsize($desired, $base : $BASE_FONT_SIZE) {
@return 1em * (strip-units($desired) / strip-units($base));
}
// a wrapper for setting font size
@mixin emfz($desired, $base : $BASE_FONT_SIZE) {
font-size: emsize($desired, $base);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment