Question

我有一个最多包含4个项目的链接栏，但在某些情况下可以减少到只有1个项目。

我只想在条形图左侧和右侧的圆角，只有第一个和最后一个项目有圆角。

问题是当只有一个项目时，因为只有一般调用没有@side参数，&:last-of-type规则显然会覆盖&:first-of-type one。

如何优化以下LESS Conditional Mixin？

.rounded_corners (@radius:5px, @side:all)
{
          border-radius:@radius;
}

.rounded_corners (@radius:5px, @side:all) when (@side = right)
{         
             border-top-right-radius:@radius;
          border-bottom-right-radius:@radius;
}

.rounded_corners (@radius:5px, @side:all) when (@side = left)
{
             border-top-left-radius:@radius;
          border-bottom-left-radius:@radius;
}

被叫：

&:first-of-type
{
  .rounded_corners(5px, left);
}

&:last-of-type
{
  .rounded_corners(5px, right);
}

是否有更智能，更紧凑的方法来达到这个目的？

谢谢。

P.S。：显然缺少供应商前缀来简化代码，但是为了节省代码，它们的必要性强调了更紧凑的解决方案的重要性。

Answer 1

等待更专家的答案，我亲自开发了这个：

.rounded_corners (@radius:5px, @side:all) when (@side = all)
{
  border-radius:@radius;
}

.rounded_corners (@radius:5px, @side:all) when not (@side = all)
{         
  border-top-@{side}-radius:@radius;
  border-bottom-@{side}-radius:@radius;
}

&:first-of-type
{
  .rounded_corners(5px, left);
}

&:last-of-type
{
  .rounded_corners(5px, right);
} 

div
{
  .rounded_corners();
}

编译成这个CSS：

:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
div {
  border-radius: 5px;
}

现在mixins只有两个，并且使用属性中的参数值创建了侧角。

还有其他更好的主意吗？

在哈利的建议之后更新

.rounded_corners (@radius:5px, @side:all) when (@side = all)
{
  border-radius:@radius;
}

.rounded_corners (@radius:5px, @side:all) when (@side = left), (@side = right)
{         
  border-top-@{side}-radius:@radius;
  border-bottom-@{side}-radius:@radius;
}

LESS：快速方法不将圆角上的冲突规则覆盖到列表的第一个和最后一个项目

1 个答案: