LESS＆amp;：扩展不使用Web Essentials 4编译Visual Studio中的属性

Question

这是我的第一个问题，我试图先搜索但无法找到答案。

我在MS Visual Studio中使用Web Essentials 4将LESS文件编译为CSS。

它工作正常，但最近我想尝试使用LESS的＆amp;扩展功能，但它不能正确编译。它只是忽略了＆amp;：extend部分。

所以我有一个简单的.less文件，代码如下：

#em-main {
  nav ul {
    &:extend(.inline);
    background: blue;
  }
  .inline {
    color: red;
  }
}

这是输出。

#em-main nav ul {
  background: blue;
}
#em-main .inline {
  color: red;
}

如果我拿出＃em-main，它编译得很好。这是LESS的限制还是我的设置有问题？

由于

Answer 1

我想知道你是否有可能尝试做什么。实际上，您尝试扩展#em-main .inline这是不可能的，另请参阅：LESS: Extend a previously defined nested selector，https://github.com/less/less.js/issues/1597等。

可能使用mixin或规则集：

@set-color: {
color: red;
};

#em-main {
  nav ul {
    @set-color();
    background: blue;
  }
  .inline {
    @set-color();
  }
}

**更新**

以上编译成：

#em-main nav ul {
  color: red;
  background: blue;
}
#em-main .inline {
  color: red;
}

但现在@harry写道：

  

我认为使用：extend（＃em-main .inline）（完全选择器路径）会   也工作。

他是对的（当然）;

#em-main {
  nav ul {
    &:extend(#em-main .inline);
    background: blue;
  }
  .inline {
    color: red;
  }
}

编译成

#em-main nav ul {
  background: blue;
}
#em-main .inline,
#em-main nav ul {
  color: red;
}