动态：SASS中的last-child

Posted 2023-03-06

【中文标题】动态：SASS中的last-child

【英文标题】：Dynamic :last-child in SASS

【发布时间】：2013-05-29 15:35:14

【问题描述】：

我已经用 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; 

希望我已经解释得足够清楚了。

谢谢

【问题讨论】：

仅:last-child 的存在将帮助您测试元素是否是最后一个子元素。

@BoltClock 是的，但它重复了我包含 Mixin 的每个元素的代码。如果它是唯一的孩子，我希望它执行该功能，如果它是最后一个孩子，我希望它执行不同的功能，而不是同时检查两者。

【参考方案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
    
  

【讨论】：

啊，这太糟糕了，我猜我想用 SASS 做很多编程？我唯一的选择似乎是将我的 :last-child 规则添加到人们必须自己包含在 last-child 元素中的 Mixin 中？

是的，这就是我的建议。可以一起使用（或不使用）的多个较小的 mixin 比一个包含一长串参数的大型 mixin 更好。

唯一的其他解决方案是使用一致的类名，但我系统的一个特点是用户可以拥有任意/语义的类名。有没有办法使用另一种语言和/或使用数据库来实现动态解决方案？

我不明白为什么这是一个问题，或者为什么你想让数据库参与其中（你认为这会给你带来什么好处？）。模块化代码是为您的用户提供所需灵活性的最佳方式，特别是如果他们是那种希望将其与自己的编码风格无缝集成的用户。

为了让我的网格系统按需要工作，必须让 :last-child 向右浮动（由于子像素渲染问题）。我可以让用户选择痛苦地记住附加一个自定义 mixin 来让最后一个孩子自己浮动（对大多数人来说没有困难，但仍然很烦人），或者我默认将 mixin 添加到每个元素并处理重复的代码.