Is there a way to inherit CSS properties from the parent while modifing some?

Question

For example, CSS properites with multiple inputs:

Is something like this possible?

.button:active {
  background-color: rgba(inherit, inherit, inherit, 0.5);
}

Is the only way to do this with a scripted-css like LESS?

Answer 1

You can achieve an answer to the example given by tackling the problem slightly differently. By putting the background colour on a pseudo element with a z-index of -1 so that it sits behind the content (which is given a z-index of 1), and then changing just the opacity... you've achieved what you wanted above without any LESS.

See this fiddle: https://jsfiddle.net/3uopd059/

.button {
  padding:1em;
  position:relative;
  float:left;
  color:#000;
  z-index:1;
}
.button::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: grey;
  z-index:-1;
}
.button:active::after {
  opacity:0.5;
}

Of course, if you wanted to change each of the colours independently then you'd need to use another method.

Answer 2

After giving it some thought, here's a workaround that would achieve what you want without anything else but what you gracefully called vanilla CSS. Passing opacity (along with background color) to a pseudo element, absolutely positioned:

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
button {
  font-family: 'Shadows Into Light', cursive;
  position: relative;
  font-size: 2rem;
  color: white;
  margin: 1rem;
  min-width: 15rem;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  cursor: pointer;
}
button>span {
  position: relative;
  z-index: 1;
}
button::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left:0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  background-color: #bada55;
  border-radius: .4rem;
}
button[orange]:before {
  background-color: #f50;
}
button:hover::before {
  opacity:.65;                              /* <-- the juice is here */
}

/* don't mind the below, i'm just playing */

body {
  margin: 0; padding: 0;
}
center-me-please {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: transparent url(http://lorempixel.com/g/1200/800/fashion) no-repeat 50% 50% /cover;
}

<center-me-please>
  
  <button><span>#bada55</span></button>
  <button orange><span>not so #bada55</span></button>