Not last child mixin SASS

Question

Is it possible to turn this:

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

Into a mixin so that I can apply it to any element and assign a child tag to it like:

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

And then apply:

div {
  @include redstripe(p);
}

What is the correct way to implement this?

I have been looking but cannot find anything that shows how to pass a tag as a parametre. — HGB, Jun 06 '15 at 20:22

score 18 · Accepted Answer · answered Jun 06 '15 at 21:01

Here's a general purpose mixin like you've described.

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

We can pass it a selector string to use.

SCSS:

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

CSS:

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

1 Answers1