स्कैस \ sass में * :: चयन {} कैसे लिखें?

Question

मैं निम्नलिखित करने की कोशिश की, लेकिन यह काम नहीं करता है:

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

Answer 1

::selection छद्म तत्व draft spec में अभी भी था, text-decoration अनुमति शैली संपत्ति में से एक के रूप में वर्णित नहीं किया गया है। यह देखते हुए कि ब्राउज़र इसे किसी भी तरह कार्यान्वित करते हैं, उन्हें उस दस्तावेज़ के अनुसार नियमों का पालन करना चाहिए, इस तरह text-decoration को अस्वीकार करना।

उस ने कहा, आपके चयनकर्ता के साथ कुछ भी गलत नहीं है, हालांकि यह ध्यान देने योग्य है कि फ़ायरफ़ॉक्स इसके बजाय विक्रेता-प्रीफ़िक्स्ड संस्करण ::-moz-selection का उपयोग करता है। क्रोम, सफारी और ओपेरा के साथ, उस ब्राउज़र का समर्थन करने के लिए आपको नियम दोहराना होगा (जानकारी के लिए this answer देखें)।

तो एससीएसएस में, यदि आप ऐसा करते हैं:

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

आप कम करने के लिए है कि सक्षम हो सकता है mixins का उपयोग कर, लेकिन मुझे यकीन है कि अगर mixins छद्म तत्व चयनकर्ताओं के साथ काम नहीं कर रहा हूँ।

Answer 2

mixins छद्म तत्व चयनकर्ताओं के साथ काम, मेरा 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; 
} 

अद्यतन

मैं मिश्रण के बजाय autoprefixer के साथ ::selection {} का उपयोग करने की सलाह देता हूं।

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

... ऐसा ही कुछ में (अपने लक्ष्य ब्राउज़रों/कॉन्फ़िगरेशन के आधार पर):

यह आपके कोड पतले और अपने दिमाग हल्का :)

इस मामले में, autoprefixer इस बदल कर देगा

::-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)