Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not last child mixin SASS

Tags:

sass

mixins

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?

like image 692
HGB Avatar asked Jun 06 '15 20:06

HGB


People also ask

How do you target the nth child in sass?

Writing Complex :nth-child() Selectors It works exactly the same as :nth-child except that it starts from the end of the parent. For example, you can select the first three children of a parent by using the selector :nth-child(-n + 3) . You can use :nth-last-child(-n + 3) to select the last three.

What is @include in SCSS?

@include s are a part of SCSS, it's called Mixin. Here is an example: @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }


1 Answers

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

DEMO

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

Sass Documentation

like image 132
Oka Avatar answered Nov 15 '22 14:11

Oka