Как написать * :: selection {} в scss \ sass?

Question

Я пытался сделать следующее, но это не работает:

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

Answer 1

Вот как я это делаю:

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

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

Обновление

Я рекомендую просто использовать ::selection {} с autoprefixer вместо mixin.Это сделает ваш код тоньше, а мозг - легче:)

В этом случае autoprefixer преобразует это:

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

... (в зависимости от вашей цели)браузеры / конфигурация) примерно так:

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

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

Answer 2

Миксины работают с селекторами псевдоэлементов;) см. Мой миксин:

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

как использовать:

@include selection(white, black);

конечно, вы можете сделать его более гибким, но для меня этого было достаточно;)

Answer 3

Хотя псевдоэлемент ::selection все еще был в черновой спецификации , text-decoration не было указано в качестве одного из разрешенных свойств стиля.Учитывая, что браузеры в любом случае реализуют его, они должны следовать правилам в соответствии с этим документом, запретив text-decoration как таковой.

Тем не менее, нет ничего плохого в вашем селекторе, хотя стоит отметить, что Firefox использует поставщикавместо версии с префиксом ::-moz-selection.Вам придется повторить правило для поддержки этого браузера вместе с Chrome, Safari и Opera (см. этот ответ для информации).

Итак, в SCSS вы должны сделать это:

* {
    &::-moz-selection { /* Style any selection */ }
    &::selection { /* Style any selection */ }
}

Возможно, вы сможете уменьшить это, используя миксины, но я не уверен, работают ли миксины с селекторами псевдоэлементов.

Answer 4

С компасом вы можете сделать это следующим образом:

@import "compass/css3/selection";
@include selection($highlightBackground, $highlightColor)

Answer 5

Отличный миксин, я перешел на работу внутри правила, добавив "&", у меня это работает лучше.Я также добавил пустой префикс, чтобы получить правило без префикса.

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