LESS get inheritable property value

Question

How to get LESS inheritable property value ex:

.btn { 
  color: #000;
  &:after {
    color: darken(inherit, 15%);
  }
}

It's impossible (A generic `inherit` value would require your HTML DOM knowledge that Less does not have). For this particular snippet use [variable](http://lesscss.org/features/#variables-feature) instead. — seven-phases-max, Jun 20 '14 at 04:30

score 1 · Answer 1 · edited May 23 '17 at 12:27

The Less compiler compiles Less code into static CSS code and does not compute any property value. The Browser use the static CSS code to compute the value for the CSS properties.

The inherit property value is a reference to the computed value of the same property of its parent. At (Less) compile time this reference, and even the computed value of the parent do not exist. The darken() function is a built in of Less and run at compile time. So the darken() function can not have inherit as input value (a color value is required).

In the comments @seven-phases-max tells you to use variables, than your code should look something like that shown below:

@buttoncolor: #000;

.btn { 
  color: @buttoncolor;
  &:after {
    color: darken(@buttoncolor, 15%);
  }
}

Notice that the use of the inherit property value it self is not forbidden in Less. For instance the following Less code will compile in valid and working CSS code:

a {
  color: red;

  &:hover{
  color: inherit;
  }
}

For the same reasons one could expect that you should be allowed to use the inherit property value in CSS(3) functions, such as width: calc(inherit - 2em); Also that is not possible although for different reasons, see CSS calc with inherit

LESS get inheritable property value

1 Answers1