Javascript 使用LESS递归地设置同名内部类的样式？

我刚开始用更少的资源工作，但在任何地方都找不到这个问题的答案

less能为同一类支持某种嵌套或递归吗

我的要求是，我可以将一个div嵌套在同名的另一个div下（它不一定总是父div的直接第一级子div）

我需要把第二季和第一季的风格不同。。。这可能吗

注意：由于我在做一个项目，所以我不得不减少使用，所以其他框架都不是我的选择。 我意识到为每个div定义不同的类是可行的，但也不是一个选项。

---

我知道这是一个奇怪的问题，但不幸的是，在我参与的项目的限制范围内工作。

您应该能够这样做：

div.someClass {
    div.someClass {

    }
}

div.someClass {
    color: red;
    div.someClass {
        color: #333;
    }
}

您可能需要“重置”嵌套div中不再需要的任何原始样式，如下所示：

div.someClass {
    div.someClass {

    }
}

div.someClass {
    color: red;
    div.someClass {
        color: #333;
    }
}

---

当然，您可以嵌套选择器。下面是一个示例，如果您希望mydiv在父级内部或外部以不同的方式显示

.mydiv

如果在

.outerdiv

中的某个位置，则会显示红色，而页面上其他位置则显示红色

更少：

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

输出CSS:

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

并且选择器

.outerdiv.mydiv

将对outerdiv内类

.mydiv

的所有对象起作用，而不管嵌套级别如何

它应该同样适用于嵌套具有相同名称的类，就像这样（我对变量和计算=）

更少：

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

输出CSS:

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

多级选择器将自动从样式表中的简单选择器继承属性

---

希望这有帮助

谢谢你的回复，这是我的直觉，但当我尝试它时，它什么也没做。将与普通CSS中的div.someClass div.someClass{}等效，但没有运气。仍然没有运气。你上面所说的听起来100%，但似乎不起作用，我不确定我想要的是否真的可能。这不是你需要的吗？您可能需要展示一个示例。这是我解释问题的方式，它似乎符合预期。这是有意义的，希望不太难让整个样式表正常工作=）@user2355891您从我这里得到+1！首先发布答案并以非常简洁的方式书写；-）我倾向于过度兴奋，试图解释一切！没有说明您尝试过什么（较少使用、编译成什么、标记等）以及为什么它不能按应有的方式工作，我们只能猜测您的实际意思。我完全同意@cimmanon的说法，我在回答中仅解释了一些可能适用于您的问题的基本LESS行为，但请帮助解决您的确切问题。。。你需要给我们一些代码非常感谢。这正是我需要的。看看下面我的答案，看看为什么我之前没用。非常感谢！