Last active
June 21, 2018 11:46
-
-
Save asha23/6f1b9a79cffb0c26cfc4638fe402f508 to your computer and use it in GitHub Desktop.
Couple of mixins
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
//// | |
/// mixins.scss | |
/// Mixins | |
/// @author Ash Whiting | |
//// | |
/// FONT SIZES IN REMS | |
/// Convert font sizes to rems with fallbacks | |
/// @param {size} $size - Font size in pixels | |
/// @param {line} $line - Line height in pixels | |
/// @example | |
/// @include fs(20,22) | |
@mixin fs($size: 1.6, $line: $size) { | |
font-size: $size + px; | |
line-height: $line + px; | |
font-size: $size / 10 + rem; | |
line-height: $line / 10 + rem; | |
} | |
/// RESPONSIVE HEADER TAGS | |
/// Calculate the least square fit linear regression of provided values | |
/// @param {map} $map - A SASS map of viewport width and size value combinations | |
/// @return Linear equation as a calc() function | |
/// @example | |
/// font-size: least-squares-fit((576: 24, 768: 24, 992: 34)); | |
@function least-squares-fit($map) { | |
$length: length(map-keys($map)); | |
@if $length < 2 { | |
@error "leastSquaresFit() $map must be at least 2 values"; | |
} | |
$resTotal: 0; | |
$valueTotal: 0; | |
@each $res, $value in $map { | |
$resTotal: $resTotal + $res; | |
$valueTotal: $valueTotal + $value; | |
} | |
$resMean: $resTotal / $length; | |
$valueMean: $valueTotal / $length; | |
$multipliedDiff: 0; | |
$squaredDiff: 0; | |
@each $res, $value in $map { | |
$resDiff: $res - $resMean; | |
$valueDiff: $value - $valueMean; | |
$multipliedDiff: $multipliedDiff + $resDiff * $valueDiff; | |
$squaredDiff: $squaredDiff + $resDiff * $resDiff; | |
} | |
$m: $multipliedDiff / $squaredDiff; | |
$b: $valueMean - $m * $resMean; | |
@return calc(#{$m * 100}vw + #{$b}px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment