Compass Text Selection

=selection($background-color: null, $color: contrast-color($background-color))
  +with-each-prefix(css-selection, $selection-support-threshold)
    $selector: ""
    @if $current-prefix != null
      $selector: $current-prefix + "-"
    $selector: "&::#{$selector}selection"
    #{$selector}
      color: $color
      background-color: $background-color
      @content

@mixin selection($background-color: null, $color: contrast-color($background-color)) {
  @include with-each-prefix(css-selection, $selection-support-threshold) {
    $selector: "";
    @if $current-prefix != null {
      $selector: $current-prefix + "-";
    }
    $selector: "&::#{$selector}selection";
    #{$selector} {
      color: $color;
      background-color: $background-color;
      @content;
    }
  }
}

Style selected text.

At this time, only two CSS properties are supported in most browsers during selection: color and background-color. Firefox supports the text-shadow property.

At the stylesheet root, include the mixin within the * selector.

* {
  @include selection(#fe57a1, #fff)
}

If a specific element or selector's selection is being styled you can use that selector instead. For example:

.hot-pink {
  @include selection(#fe57a1, #fff)
}

These properties can be passed as arguments or you can set them via mixin content.

For future-forward compatibility with other properties and aesthetic freedom, a mixin content block can be passed to this mixin in addition to or in place of passing arguments.

.hot-pink {
  @include selection {
    background: #fe57a1;
    color: #fff;
  }
}

When $background-color is specified, but $color is not, this mixin styles the foreground color like the contrasted mixin. To specify only the background-color, you should pass an explicit null value for $color or use mixin content.