Last active
November 10, 2015 08:35
-
-
Save Vlasterx/f9eb17c22bd6d9b9e6ac to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
/* | |
FALLBACK TAG MIXIN | |
author: Vladimir Jovanovic @vlasterx | www.webdizajn.org | |
2015. | |
*/ | |
// Basic variables | |
$fontSizePx: 16px; | |
$baseFontSizePx: 16px; | |
$baselineRatio: 1.61; | |
$fallbackUnit: true; // Do we want to use fallback or not | |
// CHECK BOOLEAN VALUE | |
@function bool($value: false) { | |
@if $value == false or | |
$value == "" or | |
$value == "false" or | |
$value == 'false' or | |
$value == 0 { | |
@return false; | |
} | |
@return true; | |
} | |
// REM | |
// Calculate value of REM based on `font size` and `base font size` in pixels | |
@function rem($sizePx, $baseFontSizePx) { | |
@return ($sizePx / $baseFontSizePx) * 1rem; | |
} | |
// Calculate baseline height | |
// ------------------------- | |
// This function calculates baseline height for elements which font size | |
// may not fit in line height. If that is the case, then it extends height | |
// by one more line | |
// Example calculator: http://sassmeister.com/gist/6a63a16fafbd83eef5f4 | |
@function heightBaseline($fontSizePx, $baseFontSizePx, $baseRatio: $baselineRatio) { | |
$calcBaseline: round($baseFontSizePx * $baseRatio); // $unit is rounded as well | |
@return round((floor($fontSizePx / $calcBaseline) + 1) * $calcBaseline); | |
} | |
// Fallback tag | |
@mixin tag($tag, $sizePx, $baseFontPx, $baseRatio: $baselineRatio) { | |
$tagPx: heightBaseline($sizePx, $baseFontPx); | |
#{$tag}: round($tagPx); | |
@if bool($fallbackUnit) == true { | |
$tagRem: rem($tagPx, $baseFontPx); | |
#{$tag}: $tagRem; | |
} | |
} | |
// Example | |
.test { | |
@include tag('font-size', $fontSizePx, $baseFontSizePx); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
FALLBACK TAG MIXIN | |
author: Vladimir Jovanovic @vlasterx | www.webdizajn.org | |
2015. | |
*/ | |
.test { | |
font-size: 26px; | |
font-size: 1.625rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment