Skip to content

Instantly share code, notes, and snippets.

@asha23
Last active June 21, 2018 11:46
Show Gist options
  • Save asha23/6f1b9a79cffb0c26cfc4638fe402f508 to your computer and use it in GitHub Desktop.
Save asha23/6f1b9a79cffb0c26cfc4638fe402f508 to your computer and use it in GitHub Desktop.
Couple of mixins
////
/// 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