不是最后一个孩子mixin SASS

时间:2015-06-06 20:20:39

标签: sass mixins

是否可以将其转为:

.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);
}

实现此目的的正确方法是什么?

1 个答案:

答案 0 :(得分:16)

这是一个像你所描述的通用混音。

DEMO

@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;
}

Sass Documentation