0

In a mixin that outputs ::selection styles: 

@mixin selection($color, $background) {
  $prefixes: '', '-moz-';
  @each $prefix in $prefixes {
    &::#{$prefix}selection {
      color: $color;
      background: $background;
    }
  }
}

everything outputs as expected.

If I change the order of items in the list: 

$prefixes: '-moz-', '';

it outputs only the case for the second item.

If I change the first list item to not start with a "-" then it outputs both cases.

Why doesn't it work when "-moz-" is the first item?

prkos
  • 449
  • 4
  • 12
  • I'm surprised it compiles at all, what it should do is error until you remove the ampersand from this line `&::#{$prefix}selection` and if you do that it should work how you expect. – Chris W. Oct 02 '19 at 21:33
  • @ChrisW. I have tried it without the ampersand but the results are the same. Why would it cause a problem? It represents the parent, so I can include the mixin within a selector, and the selection state would be applied to that selector, for example `p::selection {etc}`. – prkos Oct 02 '19 at 22:26
  • Actually since you mention it, I just put that in codepen and had no problems. – Chris W. Oct 03 '19 at 02:35
  • When testing your code on SassMeister changing the order of items doesn't change the output (apart from changing the order of the compiled classes). Maybe it comes from your compiler configuration? – Arkellys Oct 03 '19 at 06:21
  • Yes, it must be something in my configuration, thank you @Arkellys. Although I don't fully understand how it works. I changed the `browsers` option for the autoprefixer and now I'm getting the correct output, both prefixes, `-moz-` first. Previously I had `'> 0.5%', 'ie 9',` while the one that it works with is `'> 0.5%', 'last 1 version', 'Firefox ESR',`. – prkos Oct 04 '19 at 15:21

0 Answers0