LESS &：extend not compiling property in Visual Studio with Web Essentials 4

Question

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

我正在使用MS Visual Studio中的Web Essentials 4来将CSS的文件更少。

它可以正常工作，但是最近我想尝试使用＆amp;：扩展功能较小，但无法正确编译。它只是忽略了＆amp;：扩展部分。

所以我有一个简单的。没有此代码：

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

这是输出。

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

如果我取出＃em-main，则可以很好地编译。这是我的设置的限制还是有问题？

谢谢

Answer 1

我想知道您是否尝试做什么。实际上，您尝试扩展不可能的#em-main .inline，另请参见：少：扩展一个先前定义的嵌套选择器，https：//github.com/less/less/ress.js/issues/1597等。

可能使用混合蛋白或规则集：

@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撰写：

我认为使用：扩展（＃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;
}