Separating background-color and opacity?

Question

Is there a way to set the bg color of an element in one place and manipulate its opacity somewhere else?

I know this can be done with transparent PNGs or some stacked DIVs, but i can't use these options (please don't waste time suggesting them).

CSS File A

#menubar {
background-color: #036564;
}

CSS File B

#menubar {
background-color-opacity: 0.5; /* idea 1 */
background-color: rgba(inherit, inherit, inherit, 0.5); /* idea 2 */
}

Answer 1

It is currently not possible to specify partial color components and have the rest of the values inherit or cascade in CSS.

If you need to specify a color with an alpha value, you'll have to supply its RGB or HSL values together with the alpha, as the only color values that allow you to specify an alpha component are rgba() and hsla(). You can't specify the alpha independently of the other color components.

See the CSS3 Color Module for details.

Answer 2

If you use Sass you can define a variable for the rgb color, and then insert it into a rgba color, only specifying the alpha transparency component.

$base-color: rgb(200,150,100);

a {
  color: rgba( $base-color, .7 );
}

Found on https://robots.thoughtbot.com/controlling-color-with-sass-color-functions