css - 动态：SASS中的last-child

Question

我一直在使用 SASS 一段时间，并制作了一些很好的函数来使用 @if @else if 等。但是我在 Mixin 上有以下两段代码：

&:last-child { float: right; margin-right: 0; } 
&:only-child { float: left; margin-right: 0; }

这显然将这两段代码应用于我包含此特定 Mixin 的每个元素。有没有办法使用@if 语句或任何其他方法动态检查元素是否为 :last-child / :only:child ？

就像是：

@if :last-child == True { float: right; margin-right:0; }

希望我已经解释得足够好。

谢谢

Answer 1

Sass 对您的文档一无所知。它无法检查元素是第一个孩子还是唯一孩子。Sass 只能用于生成有效的 CSS。

如果您正在寻找不是唯一孩子的最后一个孩子，这是您的选择器：

&:last-child:not(:only-child) {
    // styles
}

http://tinker.io/1717b

如果您想禁用其中一个或另一个的输出（因为您已经知道在这种情况下只有其中一个适用），那么您需要将一个额外的参数传递给您的 mixin：

@mixin foo($children: true) {
  @if $children or $children == last-child {
    &:last-child {
      // styles
    }
  }
  @if $children or $children == only-child {
    &:only-child {
      // styles
    }
  }
}