Question

当我尝试使用&extend时，我使用较少的css作为基本网站，当元素存在时，显示没有匹配元素。

我创建了一个虚拟环境，存在同样的问题。这是我的代码

style.less

@import 'style1.less';
@colorgreen: #00ff00;
@colorred: #ff0000;
@fontsize: 20px;
@bsolid: solid;
@bdash: dashed;
 .container {
  border: 1px@bsolid #ccc;
  padding: 10px;
  .myclass {
    border: 1px@bdash #ccc;
    padding: 10px;
    h1 {
      color: @colorred;

font-size: @fontsize;

    }
    p {
      color: @colorred;

font-size: @fontsize;

    }
  }
}
.extend {
  border: 1px solid #ccc;
  padding: 10px;
  h2 {
    color: green
  }
  p {
    &: extend(h2);
    font-style: italic;
  }
}

<div class="container">
  <div class="myclass">
    <h1>Second Heading</h1>
    <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
  </div>

  <div class="importClass">
    <p>This is imported CSS.</p>
  </div>

  <div class="extend">
    <h2>First in extend</h2>
    <p>Second in extend</p>
  </div>
</div>

Answer 1

正如官方Less Website所示，Less编译器在处理extend时查看已编译的CSS选择器。

本质上，扩展会查看已编译的css，而不是原始的更少。

因此，在尝试扩展嵌套选择器时，我们应该在extend而不仅仅是内部选择器中提供完整选择器。在相关示例中， 已编译的CSS选择器 将为.extend h2，因此当extend语句仅提供h2时输入， 它不匹配 而不输出任何内容。

因此，下面的内容将成功编译并按预期工作。

.extend{
  border: 1px solid #ccc;
  padding: 10px;
  h2{
    color: green
  }
  p{
    &:extend(.extend h2);
    font-style: italic;
  }
}

编译时，会产生以下CSS：

.extend {
  border: 1px solid #ccc;
  padding: 10px;
}
.extend h2,
.extend p {
  color: green;
}
.extend p {
  font-style: italic;
}

当元素存在时，＆amp; extend显示不匹配

1 个答案: