css - 动态 :last-child in SASS

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 对您的文档一无所知。它无法检查元素是第一个 child 还是唯一的 child 。 Sass 只能用于生成有效的 CSS。

如果您正在寻找不是独生子的最后一个 child ，这是您的选择器:

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

http://tinker.io/1717b

如果你想禁用一个或另一个的输出(因为你已经知道在这种情况下只有其中一个适用)，那么你需要将一个额外的参数传递给你的混入:

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