Css 如何基于父项'；s变量

我是新手，所以要温柔。我确信我的术语也不正确：

假设我有自己的jumbotron覆盖：

.jumbotron {
  background-color: #ff4400;
}

然后，我想要有一个自定义的覆盖，我继承了上面的类，并且只使用它的颜色作为参数覆盖它的背景颜色，以“light（）”。我搞不懂语法：

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

---

LESS允许您定义变量。因此，您可以为父项的颜色定义一个变量，然后在

lighte

函数中使用它，如下所示：

@parentColor: #ff4400;

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

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

注意：这将产生两个

背景色设置，但这应该没问题，因为CSS将最后一个可用设置作为值，在这种情况下，它将是亮显值

不使用变量的选项1:要在不使用父颜色变量的情况下实现
变亮
或
变暗
效果，请参阅in发布的解决方案或评论中发布的演示

选项2:（本项目最多由七个阶段提供）

最佳替代解决方案（如果您无法修改原始
.jumbotron
代码以使用变量，并且将
.myJumbotron
元素作为非父
.jumbotron
元素的子元素）如下：

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

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

Harry，很抱歉延迟回复。好吧，这种方法在这种情况下有效，但这不是我问题的真正根源。我想知道，从语法角度来看，是否可以引用mix-in/parent的变量。你所做的不一样。例如，假设我有一个父变量，我不知道它是如何设置的——我只想引用它，然后修改它。对于你的解决方案，我必须知道@parentColor是父母使用的。在大多数情况下，我不容易知道如何使用或使用了什么变量-我只想获取并修改它。如果不使用变量，就不可能对父颜色执行变亮/变暗等功能。有关使用不透明度的解决方法，请参阅。这是实现效果的唯一可能的选择。哈利，我看了你引用的线程，它说“如果你想这样做，就少用点”。然而，没有提供这样的解决方案。同样，我也没有接近我的简单问题：在LESS中，“子类可以引用父变量吗？如果可以，语法是什么？”@staggart：我猜你错过了max在该线程中的七个阶段的评论。检查。它通过在父颜色中添加白色/黑色来创建父颜色的亮/暗版本。这种方法不需要你知道颜色。如果不使用变量，您就无法直接引用父对象的颜色。另一种替代解决方案（如果您无法修改原始的
.jumbotron
代码，则最好），如何将“child”jumbotron HTML“叠加”到“parent”jumbotron HTML:。