不是最后一个孩子 mixin SASS答案

【问题标题】：Not last child mixin SASS不是最后一个孩子 mixin SASS
【发布时间】：2015-06-06 20:20:39
【问题描述】：

是否可以转这个：

.redstripe p:not(last-child) {
  border-bottom:1px solid red;
}

到一个 mixin 中，这样我就可以将它应用到任何元素并为其分配一个子标签，例如：

@mixin redstripe (this.$children):not(last-child) {
  border-bottom:1px solid red;
}

然后申请：

div {
  @include redstripe(p);
}

实现这个的正确方法是什么？

【问题讨论】：

标签： sass mixins

【解决方案1】：

这是您描述的通用 mixin。

@mixin not-last-child($selector) {
  & #{$selector}:not(:last-child) {
    @content;
  }
}

我们可以传递一个选择器字符串来使用。

SCSS：

.thing {
  @include not-last-child('p') {
    color: red;
  }
}

CSS：

.thing p:not(:last-child) {
  color: red;
}

【讨论】：