0

我刚开始使用 LESS，但无法在任何地方找到答案。

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

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

我需要将第二个 div 设置为与第一个不同的样式......这可能吗？

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

4

2 回答 2

4

你应该可以这样做：

div.someClass {
    div.someClass {

    }
}

您可能必须像这样在嵌套 div 中“重置”您不再需要的任何原始样式：

div.someClass {
    color: red;
    div.someClass {
        color: #333;
    }
}
于 2013-05-17T18:21:58.377 回答
3

当然你可以嵌套你的选择器。这是一个示例，如果您希望 mydiv 在父项内部或外部以不同方式显示。.mydiv如果它在 内的某个地方将显示为红色.outerdiv，而在页面上的其他任何地方显示为红色。

较少的：

.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都将适用于.mydivouterdiv内的所有类对象。

演示

它应该与具有相同名称的嵌套类一样工作，就像这样（我对变量和计算添加了一些花哨=）

较少的：

@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;
}

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

演示 2

希望这可以帮助！

于 2013-05-17T18:42:14.740 回答