如何將* :: selection {}寫入scss \ sass？

Question

我試着做以下，但它不工作：

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

Answer 1

雖然::selection僞元素仍然在draft spec，text-decoration沒有說明作爲允許的樣式屬性之一。鑑於瀏覽器無論如何實施它們，他們應該遵循該文件的規則，不允許text-decoration這樣。

也就是說，您的選擇器沒有任何問題，但值得注意的是，Firefox使用供應商前綴版本::-moz-selection來代替。您必須重複該規則才能支持該瀏覽器，以及Chrome，Safari和Opera（有關信息，請參閱this answer）。

所以在SCSS，你可以這樣做：

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

您可能能夠減少使用的混入，但我不知道，如果混入用僞元素選擇工作。

Answer 2

混入與僞元素選擇工作;）看到我的mixin：

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

如何使用：

@include selection(white, black); 

當然

你可以把它更加靈活，但對我來說就足夠了;）

Answer 3

這是我做的方式：

// 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 4

偉大的mixin，我已經改變了工作規則，通過添加「&」，它對我更好。我還添加了一個空白前綴來獲取不帶前綴的規則。

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

Answer 5

有了指南針，你可以做如下所示：

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