CODEWITHSUNDEEP
sasssusy-compass
Łukasz Zaroda
Łukasz Zaroda

Reputation: 767

Susy 2: How to remove "last" from nth-child on different breakpoint?

I'm using Susy 2 and I have this code:

@include breakpoint($tab) {
  .l-region--sections {
    > .block {
      @include span(6 of 12);
      &:nth-child(2n) {
        @include last;
      }
    }
  }
}

@include breakpoint($desk) {
  .l-region--sections {
    > .block {
      @include span(4 of 16);
      &:last-child {
        @include last;
      }
    }
  }
}

The problem is that at desktop width, the ":nth-child(2n)" takes effect and I would like to remove it completely in favor of ":last-child". How can I remove ":nth-child(2n)" styles for desktop?

Upvotes: 1

Views: 1344

Answers (1)

Łukasz Zaroda
Łukasz Zaroda

Reputation: 767

It appears the answer is here: https://github.com/ericam/susy/issues/328 , basically:

@include breakpoint($tab) {
  .l-region--sections {
    > .block {
      @include span(6 of 12);
      &:nth-child(2n) {
        @include last;
      }
    }
  }
}

@include breakpoint($desk) {
  .l-region--sections {
    > .block {
      @include span(4 of 16);
      &:nth-child(2n) {
        @include span(4 of 16); // We are declaring span for this container here once more, just to override nth-child styles.
      }
      &:last-child {
        @include last;
      }
    }
  }
}

Upvotes: 2

Related Questions