Skip to content

Instantly share code, notes, and snippets.

@Vlasterx
Last active November 9, 2015 13:42
Show Gist options
  • Save Vlasterx/6a63a16fafbd83eef5f4 to your computer and use it in GitHub Desktop.
Save Vlasterx/6a63a16fafbd83eef5f4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
/* BASELINE HEIGHT EXAMPLE */
// Test with these values
$fontSize: 25px;
$baseFontSize: 16px;
$buffer: 0.90; // Font can grow up to 90% of line height before we add new line
$lineHeightRatio: 1.61;
// Do not edit below this line
// ---------------------------
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
@function nearestEven($number) {
$even: strip-units(round($number));
$test: $even % 2;
// Number is even - return it
@if ($test == 0) {
@return $even;
}
// Number is not even, return next even number
@else {
@return $even + 1;
}
}
@function heightBaseline($fontSizePx, $baseFontSizePx, $baseRatio: $lineHeightRatio) {
$calcBaseline: nearestEven($baseFontSize * $lineHeightRatio); // $unit is rounded as well
$maxFontSizePerBaseLine: round($calcBaseline * $buffer);
$calcLineHeight: round((floor($fontSizePx / $calcBaseline) + 1) * $calcBaseline);
@return $calcLineHeight;
}
@function lines($fontSizePx, $baseFontSizePx, $baseRatio: $lineHeightRatio) {
$calcBaseline: round($baseFontSizePx * $baseRatio); // $unit is rounded as well
@return round((floor($fontSizePx / $calcBaseline) + 1));
}
@print {
/* Basic settings */
base-font-size: $baseFontSize;
baseline-ratio: $lineHeightRatio;
single-line-height: nearestEven($baseFontSize * $lineHeightRatio) *1px;
/* New typographic element font size*/
element-font-size: $fontSize;
/* New element will fit in container of this height */
calculated-number-of-lines: lines($fontSize, $baseFontSize);
calculated-line-height-is: heightBaseline($fontSize, $baseFontSize);
maxFontSize: round(nearestEven($baseFontSize * $lineHeightRatio) *1px * $buffer);
}
/* BASELINE HEIGHT EXAMPLE */
@print {
/* Basic settings */
base-font-size: 16px;
baseline-ratio: 1.61;
single-line-height: 26px;
/* New typographic element font size*/
element-font-size: 25px;
/* New element will fit in container of this height */
calculated-number-of-lines: 1;
calculated-line-height-is: 26px;
maxFontSize: 23px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment