Skip to content

Instantly share code, notes, and snippets.

@paulozoom
Created April 9, 2015 15:43
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save paulozoom/23ebed1c8c07d9455413 to your computer and use it in GitHub Desktop.
Save paulozoom/23ebed1c8c07d9455413 to your computer and use it in GitHub Desktop.
Sass function to calculate the color of a linear gradient at a specific point
///
/// Calculates the color of a linear gradient at a specific point.
///
/// @param {Color} $start - gradient’s start color
/// @param {Color} $end - gradient’s end color
/// @param {Number} $point - point of the gradient (between 0 and 1, or 0% and 100%) at which we want the color
/// @return {Color}
///
/// @example scss
/// background-color: gradient-color-at(#BBE087, #DCDE85, 0.4);
///
@function gradient-color-at($start, $end, $point) {
$error-message: "$point needs to be a percentage (0% to 100%) or a unitless number (0 to 1)";
$unit: unit($point);
// $point needs to be unitless or percentage
@if $unit != "" and $unit != "%" {
@error $error-message;
}
@else {
// convert $point to fraction
@if $unit == "%" { $point: $point / 100%; }
// check if within bounds
@if $point < 0 or $point > 1 { @error $error-message; }
}
$delta_h: hue($end) - hue($start);
$delta_s: saturation($end) - saturation($start);
$delta_l: lightness($end) - lightness($start);
$delta_a: alpha($end) - alpha($start);
@return adjust-color(
$color: $start,
$hue: $point * $delta_h,
$saturation: $point * $delta_s,
$lightness: $point * $delta_l,
$alpha: $point * $delta_a
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment