SCSS Functions for Black/White (with Alpha)

[ReneDrie]

For a lot of projects we use white and black with an Alpha channel for colors/backgrounds/lines etc. Would it be convenient if we create 2 functions for this? So you can do something like:

color: white(0.5)
background: black(0.5)

Implementation is probably quite simple, but something in the lines of:

@function white($alpha: 1) {
  @return rgba(255, 255, 255, $alpha);
}
@function black($alpha: 1) {
  @return rgba(0, 0, 0, $alpha);
}

[tworrisb]

Can we maybe also do something like:

@function color($color, $alpha: 1) {
  @return rgba(#{$color}, $alpha);
}

[ThaNarie]

@tworrisb What would your function add?

black; // normal
color(black); // yours

rgb(white / 0.8); // normal
color(white, 0.8); // yours

I only see more typing, with no saved benefit?

[ReneDrie]

I also agree that I don't see the benefit of that.

[nswaldman]

I don't like either proposal over just writing rgba(black, 0.5) and rgba(white, 0.5).

On the one had we have two functions that do the same to one hard-coded colour each. So any deviation of how a design treats these two colours (a previous project had $black: #1d1d1d;) renders these functions useless. On the other hand we have a function that is rgba() with extra steps.

There's less moving parts to just writing rgba(black, 0.5), rgba(white, 0.5) or rgba($black, 0.5).

[ThaNarie]

I was slightly mistaken, rgb(black / 0.5) is not possible, you would always need to do 0 0 0 or 255 255 255.

So it would be:

// normally
color: black;
color: rgb(0 0 0 / 0);
color: rgb(0 0 0 / 0.5);

// with this util
color: black();
color: black(0);
color: black(0.5);

[jesse-mm]

In sass you can do rgba(#000, 0.5) for me it has the same verbosity as for rgba(black, 0.5)