嵌套 class 未应用于 LESS "function"

Question

考虑这个 LESS 文件...

@media screen and (max-width: 1200px){
    .container(100px);
}

@media screen and (max-width: 200px){
    .container(40px);
}

.container(@size){
    margin: 50px;

    div.left{
        background-color: blue;
        font-size: @size;
    }

    div.right{
        background-color: red;
        font-size: @size;
    }
}

还有这个 HTML 文件：

<div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

我得到右边的 <div> 工作得很好，但是左边的没有应用任何样式...这里有什么问题吗？

注意：我尝试了 > 运算符和 & 运算符，擦除 div 并使 .left 没有任何效果。 .

Answer 1

你是运行没有合适的选择器块的混入。

尝试将您的代码更改为：

@media screen and (max-width: 1200px){
  .container {
    .container(100px);
  }
}

@media screen and (max-width: 200px){
  .container {
    .container(40px);
  }
}

.container(@size){
    margin: 50px;

    div.left{
        background-color: blue;
        font-size: @size;
    }

    div.right{
        background-color: red;
        font-size: @size;
    }
}

嵌套 class 未应用于 LESS "function"

Nested class not applied in LESS "function"

html

css

less

Working example