How write *::selection{} in scss\sass?

Question

I tried to do the following, but it does not work:

* {
    &::selection { text-decoration: underline; }
}

Answer 1

That's the way I do it:

// define it
@mixin selection {
    ::-moz-selection { @content; }
    ::selection { @content; }
}

// use it
@include selection {
    color: white;
    background: black;
}

Update

I recommend to just use ::selection {} with autoprefixer instead of a mixin. This will make your code thinner and your brain lighter :)

In this case, autoprefixer will transform this:

::selection {
    color: white;
    background: black;
}

...(depending on your target browsers/configuration) into something like that:

::-moz-selection {
    color: white;
    background: black;
}

::selection {
    color: white;
    background: black;
}

Answer 2

Mixins work with pseudo element selectors ;) see my mixin:

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

how to use:

@include selection(white, black);

of course you can make it far more flexible, but it was sufficient for me ;)