11
votes

Comment écrire * :: Sélection {} dans SCSS \ SASS?

J'ai essayé de faire ce qui suit, mais cela ne fonctionne pas:

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

css css-selectors sass

0 commentaires

5 Réponses :

7
votes

tandis que le :: Sélection code> pseudo-élément était toujours dans le SPECUT SPECTURE , La décoration de texte code> n'a pas été indiquée comme l'une des propriétés de style autorisées. Étant donné que les navigateurs le mettent en œuvre de toute façon, ils devraient suivre les règles selon ce document, refusant texte-décoration code> comme tel.

Cela dit, il n'y a rien de mal à votre sélecteur, bien que cela vaut la peine de noter que Firefox utilise la version de Vendor-préfixée :: - Moz-Selection Code> à la place. Vous devriez répéter la règle pour soutenir ce navigateur, avec chrome, safari et opéra (voir Cette réponse pour info). p>

Donc, dans SCSS, vous feriez ceci: p>

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

0 commentaires

11
votes

mixines fonctionne avec des sélecteurs d'élément pseudo;) Voir mon mixin:

@include selection(white, black);

2 commentaires

:: La sélection n'a que un préfixe -moz, et il vaut la peine de noter qu'il s'agit d'une non standard et de ne pas être utilisé, cochez ce page sur le réseau de développeurs Mozilla.

@Peter: étrange que j'ai manqué quand j'ai édité cette réponse la première fois. Je fais habituellement une attention particulière à ces choses. (Et oui, je sais que tu n'es pas le même Peter.)

31
votes

C'est comme ça que je le fais: xxx pré>

update h1>

Je recommande de simplement utiliser :: Sélection {} code> avec Autoprefixer au lieu d'un mixin. Cela rendra votre code diluant et votre briquet cérébral :) p>

Dans ce cas, Autoprefixer A > transformera ceci: p> xxx pré>

... (en fonction de vos navigateurs / configuration cible) dans quelque chose comme ça: P>

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

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

3 commentaires

Ceci est définitivement beaucoup plus propre et plus réutilisable que la réponse de Peter. J'espère que ça se lève au sommet!

@VitalyBatonov Si votre question est répondue, marquez-la telle qu'elle est :)

Malheureusement, je ne pense pas que cela va se passer - l'OP n'a pas été sur le site, car même avant de poster cette réponse. Votre réponse a déjà augmenté au sommet, cependant, il y a donc cela au moins.

1
votes

Great Mixin, j'ai changé pour travailler dans une règle en ajoutant "&", ça marche mieux pour moi. J'ai également ajouté un préfixe vide pour obtenir la règle sans préfixe. XXX

0 commentaires

0
votes

Avec Compass, vous pouvez le faire comme suit:

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

1 commentaires

"Utilisez simplement la bibliothèque de quelqu'un d'autre" n'explique pas comment on irait écrire une caractéristique similaire qui n'existe pas dans ladite bibliothèque.