Question

我使用初始化取消了特定的颜色，但是IE不支持初始化，所以我必须为它提供特定的颜色。以下是我使用的格式。

最初：

a.link-ele {
  color: initial;
  &:hover {
    text-decoration: none;    
    color: initial;
  }
}

为了支持IE：

a.link-ele {
  color: black;
  color: initial;
  &:hover {
    text-decoration: none;  
    color: black;  
    color: initial;
  }
}

这里黑色将在IE中设置，并且在支持它的浏览器中初始化，因为初始版本稍后。

问题：较少，为了优化CSS，仅使用color:initial;，因为它认为很明显第二个将被浏览器使用。

好吧，我这样做了：

a.link-ele {
      color: initial;
      &:hover {
        text-decoration: none;    
        color: initial;
      }
    }
.link-ele {
  color: black;
  &:hover {
    color: black;
  }
}

我改变了特异性思维Less不会删除它但看起来Less仍然使用更高的特异性值。

问题：如何让Less允许这两个值？

注意：我知道要使用不同的类名或其他方式使其工作，我只想知道是否有一个标志或我可以设置的东西，使得Less允许这两种颜色。

我已经在IE和其他浏览器中测试了上述概念，并且工作正常

我使用ember-cli和emberjs框架

Answer 1

正如我在评论中提到的，Less编译器不会从编译输出中删除任何属性，即使它是冗余信息。编译器仍会使用color: black和color: initial设置提供以下输出。有一个演示here。

a.link-ele {
  color: black;
  color: initial;
}
a.link-ele:hover {
  text-decoration: none;
  color: black;
  color: initial;
}

因此，某些CSS压缩器或缩小器应该完成删除冗余属性，因为它们通常会消除所有冗余和不需要的信息。在你的情况下，似乎minifyCSS。

较少的预处理器会删除重复的属性

1 个答案: