How to override a LESS mixin variable based on a parent variable

Question

I am new, so be careful. I am sure my terminology is also incorrect:

Suppose I have my own jumbotron override:

.jumbotron {
  background-color: #ff4400;
}

and then I want to have a custom redefinition of where I inherit the above class, and only redefine its background color, using its color as a parameter for "lighten ()". I can not understand 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. That way, you can define a variable for the parent color, and then use it in a function lighten, as shown below:

@parentColor: #ff4400;

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

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

.. background-color, , CSS , .

1 : lighten darken , ScottS seven-phases-max .

2: ( 7-- comment)

( .jumbotron .myJumbotron .jumbotron), :

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

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

2