css - How to override a LESS mixin variable based on a parent's variable

Question

I am a newbie, so be gentle. I am sure my terminology is incorrect too:

suppose I have my own jumbotron override:

.jumbotron {
  background-color: #ff4400;
}

and then I want to have a custom override of that where I inherit the above class and only override its background color using its color as a parameter to "lighten()". I can't figure out the syntax:

.Myjumbotron {
    .jumbotron;
    /* not sure what goes below for "parent.background-color" */
    background-color: lighten(parent.background-color, 30%);
}

Answer 1

LESS allows you to define variables. So you can define a variable for the parent's color and then use it within the lighten function like below:

@parentColor: #ff4400;

.jumbotron {
  background-color: @parentColor; /* Using the parent color variable */
}

.Myjumbotron {
    .jumbotron;
    background-color: lighten(@parentColor, 30%); /* Lightening the parent color */
}

Demo

Note: This would produce two background-color setting but that should be fine because CSS takes the last available setting as the value and in this case it would be the lightened value.

Option 1 without using variables: For achieving the lighten or darken effect without using a parent color variable, refer to the work-around answer posted by ScottS in this thread or the demo that seven-phases-max has posted in the comments.

Option 2: (contributed by seven-phases-max in this comment)

Best alternative solution (if you cannot modify the original .jumbotron code to use variables and have the .myJumbotron element as not a child of the parent .jumbotron element) would be the below:

.jumbotron {
    background-color: #ff4400;
    color: white;
    padding: 2em;
}

.Myjumbotron:extend(.jumbotron) {
   @back: fade(white, 60%);
    background-image: linear-gradient(@back, @back);
}

Demo for Option 2