Question

我刚刚开始与LESS合作，但无法在任何地方找到答案。

可以少支持同一类的某种嵌套或递归吗？

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

我需要将第二个div与第一个div区分开来......这是可能的。

注意：由于我正在进行的项目，我与使用LESS有关，所以其他框架不是一个选项。我意识到为每个div定义不同的类可以工作，但也不是一个选项。我知道这是一个奇怪的，但不幸的是，我正在项目的限制范围内工作。

Answer 1

你应该能够这样做：

div.someClass {
    div.someClass {

    }
}

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

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

Answer 2

当然你可以嵌套你的选择器。下面是一个示例，如果您希望mydiv显示不同，如果它在父级内部或外部。如果.mydiv位于.outerdiv内的某个位置，则会显示红色，并且页面上的其他位置都会显示红色。

<强> LESS：

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

输出 CSS：

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

并且选择器.outerdiv .mydiv将在外部区域内的类.mydiv的所有对象上工作，无论嵌套级别如何。

DEMO

并且它应该与嵌套具有相同名称的类相同，就像这样（我在变量和计算中添加一些好感=）

<强> LESS：

@width:300px;

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

输出 CSS：

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

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

DEMO 2

希望这有帮助！

使用LESS以递归方式设置同名的内部类？

2 个答案:

DEMO

DEMO 2