CODEWITHSUNDEEP
csssass
gespinha
gespinha

Reputation: 8487

SASS @each duplicating selector with placeholder

I am having some problems with the SASS @extend

I have the following code http://codepen.io/anon/pen/AgCnF?editors=110

HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

SASS

$link-different: 1, 2

li
    @if $link-different != 0
        %different-background
            background: #000

        @each $different in $link-different
            &:nth-child(#{$different})
                @extend %different-background !optional
    @else

But it is outputting two li elements on the CSS selector path

CSS output

li li:nth-child(1), li li:nth-child(2) {
  background: black;
}

Desired CSS output

How can I make it output this?

li:nth-child(1), li:nth-child(2) {
  background: black;
}

Upvotes: 0

Views: 42

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Try this code on sassmeister

$link-different: 1, 2

%different-background
  background: #000


li

  @if $link-different != 0

    @each $different in $link-different

      &:nth-child(#{$different}) 
        @extend %different-background !optional

  @else

Output

li:nth-child(1), li:nth-child(2) {
  background: black; 
}

Upvotes: 2

Related Questions