Cách viết * :: selection {} trong scss \ sass?

Question

Tôi cố gắng để làm như sau, nhưng nó không hoạt động:

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

Answer 1

Trong khi giả yếu tố ::selection vẫn còn trong draft spec, text-decoration đã không tuyên bố là một trong những thuộc tính phong cách cho phép. Mặc dù các trình duyệt vẫn thực hiện nó, chúng phải tuân thủ các quy tắc theo tài liệu đó, không cho phép text-decoration như vậy.

Điều đó nói rằng, không có gì sai với bộ chọn của bạn, mặc dù điều đáng chú ý là Firefox sử dụng phiên bản đầu tiên của nhà cung cấp ::-moz-selection thay thế. Bạn sẽ phải lặp lại quy tắc để hỗ trợ trình duyệt đó, cùng với Chrome, Safari và Opera (xem this answer để biết thông tin).

Vì vậy, trong SCSS, bạn muốn làm điều này:

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

Bạn có thể có thể làm giảm rằng việc sử dụng mixins, nhưng tôi không chắc chắn nếu mixins làm việc với selectors pseudo-yếu tố.

Answer 2

mixins làm việc với chọn thành phần giả;) xem mixin tôi:

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

làm thế nào để sử dụng:

@include selection(white, black); 

tất nhiên bạn có thể làm cho nó xa linh hoạt hơn, nhưng nó đã đủ cho tôi ;)

Answer 3

đó là cách tôi làm điều đó:

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

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

Cập nhật

Tôi khuyên bạn chỉ nên sử dụng ::selection {} với autoprefixer thay vì bản mixin. Điều này sẽ làm cho mã của bạn mỏng hơn và bộ não của bạn nhẹ hơn :)

Trong trường hợp này, autoprefixer sẽ làm thay đổi này:

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

... (tùy thuộc vào trình duyệt mục tiêu của bạn/cấu hình) vào một cái gì đó như thế:

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

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

Answer 4

Kết hợp tuyệt vời, tôi đã thay đổi để làm việc bên trong quy tắc bằng cách thêm "&", nó hoạt động tốt hơn cho tôi. Tôi cũng đã thêm tiền tố trống để nhận quy tắc không có tiền tố.

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

Answer 5

Với la bàn bạn có thể làm điều đó như sau:

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