Skip to content

Instantly share code, notes, and snippets.

@jdeagle
Created July 18, 2015 18:08
Show Gist options
  • Save jdeagle/0e52565a6279ba107b6d to your computer and use it in GitHub Desktop.
Save jdeagle/0e52565a6279ba107b6d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
@function get-px-from-vw($vw, $contextWidth) {
@return (($contextWidth / 100) * $vw) + px;
}
@function strip-units($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@mixin font-size($sizeValue: 1.6, $line: $sizeValue + .5, $contextWidth:0) {
//
// examples
// set as REM
// @include font-size(16.4, 14.5);
//
// set as VW
// @include font-size(6.45vw, 8vw);
//
@if type-of($sizeValue) == "number" and unitless($sizeValue) {
font-size: ($sizeValue * 10) + px;
line-height: ($line * 10) + px;
font-size: $sizeValue + rem;
line-height: $line + rem;
} @else {
@if $contextWidth > 0 and unit($sizeValue) == vw {
font-size: get-px-from-vw(strip-units($sizeValue), strip-units($contextWidth));
line-height: get-px-from-vw(strip-units($line), strip-units($contextWidth));
}
font-size: $sizeValue;
line-height: ($line);
}
}
.foo {
@include font-size(6.25vw, 7vw, 320);
}
.bar {
@include font-size(6.25px, 7vw, 320);
}
.baz {
@include font-size(6.25vw, 7vw);
}
.foo {
font-size: 20px;
line-height: 22.4px;
font-size: 6.25vw;
line-height: 7vw;
}
.bar {
font-size: 6.25px;
line-height: 7vw;
}
.baz {
font-size: 6.25vw;
line-height: 7vw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment