Skip to content

Instantly share code, notes, and snippets.

@yckart
Last active Aug 29, 2015
Embed
What would you like to do?
SASS/SCSS Coloury
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="button button--gold">Pushy</a>
<a class="button button--crimson">Hazey</a>
<hr>
<a class="button button--gold">Gold</a>
<a class="button button--crimson">Crimson</a>
<a class="button button--indigo">Indigo</a>
<a class="button button--yellowgreen">Yellowgreen</a>
<a class="button button--deepskyblue">Deepskyblue</a>
</body>
</html>
/**
* Compute the brightness of a color.
*
* @param color $color
* @see http://compass-style.org/reference/compass/utilities/color/brightness/
*/
@function brightness($color) {
@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
}
/*
* Calculates the sRGB luma of a colour.
*
* Math nicked from a great Thoughtbot article by Reda Lemeden:
* http://robots.thoughtbot.com/closer-look-color-lightness
*/
@function luma($c) {
$-local-red: red(rgba($c, 1.0));
$-local-green: green(rgba($c, 1.0));
$-local-blue: blue(rgba($c, 1.0));
@return (0.2126 * $-local-red +
0.7152 * $-local-green +
0.0722 * $-local-blue) / 255;
}
/**
* Picks a colour from two options based on which one is more visible
* on the given background colour.
*
* @param color $bg Elements background color
* @param color $c1 Primary color
* @param color $c2 Secondary color
* @example pick-visible-color($bg-color, $color-1, $color-2);
* @see https://lnikki.la/articles/sass-better-colour-based-on-brightness/
*/
@function pick-visible-color($bg, $c1, $c2) {
$bg-luma: luma($bg);
$c1-luma: luma($c1);
$c2-luma: luma($c2);
$c1-diff: abs($bg-luma - $c1-luma);
$c2-diff: abs($bg-luma - $c2-luma);
@return if($c1-diff > $c2-diff, $c1, $c2);
}
@function pick-scaled-color($color, $scale: 65%) {
@return pick-visible-color($color,
scale-color($color, $lightness: $scale),
scale-color($color, $lightness: -$scale)
);
}
// variables/_colors.scss
$colors: gold, crimson, indigo, yellowgreen, deepskyblue;
// elements/_buttons.scss
.button {
display: inline-block;
padding: 0.5em;
@each $color in $colors {
&--#{$color} {
color: pick-scaled-color($color);
background-color: $color;
}
}
}
// index.scss
body {
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment