Skip to content

Instantly share code, notes, and snippets.

Last active Jun 26, 2017
What would you like to do?
SASS Font calculation
<div class="test">Hello</div>
@import "compass/css3";
$base-font-size: 16px !default;
$base-line-height: 16px !default;
$default-unit: 1rem !default; // 1px or 1em or 1rem
$px-fallback: true !default; // Adds fallback px values for old browsers when using rems
* @functon value
* Given a px value, returns it in the default unit
* Parameters:
* $px-value: The px value
* $baseline-px: Unit to output the value in
* $default-unit: The font-size on the HTML element
@function value($px-value, $baseline-px: $base-font-size, $default-unit: $default-unit) {
// Convert the baseline into rems
$baseline-rem: $baseline-px / $default-unit;
@return if($px-value == 0, $px-value, $px-value / $baseline-rem);
.test {
font-size: value(100px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment