Skip to content

Instantly share code, notes, and snippets.

@LeaVerou

LeaVerou/gray.scss

Last active May 16, 2022 13:05
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save LeaVerou/9199277 to your computer and use it in GitHub Desktop.
Save LeaVerou/9199277 to your computer and use it in GitHub Desktop.
Download ZIP
Polyfill gray() from CSS Color Level 4 with SASS
Raw
gray.scss
@function gray($intensity, $alpha: 1) {
@return rgba($intensity, $intensity, $intensity, $alpha);
}
/* Thanks Chris Eppstein for simplifying my code! */
/* Testing our new function */
body {
background: gray(50%);
background: gray(255, .2);
}
/* Test should output something like: */
body {
background: #7f7f7f;
background: rgba(255, 255, 255, 0.2); }
@iholler
Copy link

iholler commented Feb 24, 2014

I like the more mentally pleasing way of calling out gray in percentages. Fancy. :D

@chriseppstein
Copy link

This can be simplified to:

@function gray($intensity, $alpha: 1) {
  @return rgba($intensity, $intensity, $intensity, $alpha);
}

Which will return a Sass color resulting in:

body {
  background: #7f7f7f;
  background: rgba(255, 255, 255, 0.2); }

@LeaVerou
Copy link
Author

Thanks Chris!! Gist updated!

@robwierzbowski
Copy link

Like prisma color markers! I'll take it.

@Anahkiasen
Copy link

Man I've been defining a grey function in all my projects for three years. Now that it's gray I'm screwed :D

@sullenfish
Copy link

The Stylus version of this is almost identical:

gray(intensity, alpha = 1)
  rgba(intensity, intensity, intensity, alpha)

https://gist.github.com/sullenfish/9215944

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment