Question

我有更少的代码，这工作得很好。我只想在较少的cli编译时保存一些空格。

.secondary-content {
    background: #ffcc80;
    color: white !important;

    label, i {
        background: #ffcc80;
        color: white !important;
    }
}

当我从命令提示符运行较少时，输出看起来像这样。

.secondary-content {
  background: #ffcc80;
  color: white !important;
}
.secondary-content label,
.secondary-content i {
  background: #ffcc80;
  color: white !important;
}

正如您所看到的，它们在每个区块上是分开的。我想让他们在同一个街区。我怎样才能轻松合并父级和子级样式属性？像这样。

.secondary-content,
.secondary-content label,
.secondary-content i {
  background: #ffcc80;
  color: white !important;
}

我仍然在减少学习，所以任何帮助都会受到高度赞赏。

提前致谢

Answer 1

您可以使用下面代码段中的parent selector（Button）。使用父选择器意味着相同的规则适用于&选择器及其子.ghost .secondary-content和label标记。

Answer 2

当然@Harry提供的解决方案是有效的。当你学习Less时，你应该记住，Less可以帮助你编写干净的CSS代码并提高效率。 Less不能帮助你解决问题，你无法在常见的CSS中解决，少编译成CSS并且不会在编译的CSS中添加任何功能。

要减少共享某些属性的选择器的CSS大小，您应该考虑Less的扩展功能：http://lesscss.org/features/#extend-feature-reducing-css-size：

.selector1 {
  color: red;
}

.selector2:extend(.selector1) {}

输出：

.selector1,
.selector2 {
  color: red;
}

要解决您的问题，您应该重新考虑所需的CSS代码而不是Less代码。由于label，i的嵌套，您无法使用扩展，但为什么要将它们嵌套以设置color和background-color？

background-color的默认值为transparent，因此当您为父级设置background-color时，您没有为子元素设置background-color（使用时）相同的价值）。

可以使用具有更高特异性的其他样式规则覆盖默认transparent，另请参阅http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

一个示例，它为您的嵌套label提供了错误的background-color：

label {
background-color:green;
}             
.secondary-content {
background-color:red;
color: white;    
}

除了在锚中应用之外，始终从其父级继承的color属性也是如此。

您还在使用!important，请参阅：https://css-tricks.com/when-using-important-is-the-right-choice/

如何使用LESS

2 个答案: