ul，ul li从less到CSS

Question

我一直在寻找这个。 我试图通过less

在css中实现这一点

ul,ul li{ 
display:inline-block; 
} 

我使用的越少就是：

ul,ul li{
    display:inline-block;
}

问题是，如果我尝试为li或它的孩子添加额外的属性，上面的LESS不好，因为它输出如下：

LESS

 ul,ul li{
     display:inline-block;
     li{ 
      float:left;    
     }
 }

CSS

ul,
ul li {
  display: inline-block;
}
ul li,
ul li li {
  float: left;
}

我怎样才能做到这一点：

ul,
ul li {
  display: inline-block;
}

并没有其他更少的东西？

Answer 1

您可以使用：

ul {
    &, li {
      display: inline-block;
    }
}

将生成以下CSS：

ul,
ul li {
  display: inline-block;
}

如果已经有ul的声明：

ul {
  display: inline-block;
}

您可以使用extend获得相同的效果：

ul {
    li:extend(ul) {}
}

或在没有& extend的情况下一个块中的相同结果：

ul {
  display: inline-block;
  li:extend(ul) {}
}