प्लेसहोल्डर मिक्स एससीएसएस / सीएसएस

Question

मैं सैस में प्लेसहोल्डर्स के लिए एक मिक्सिन बनाने की कोशिश कर रहा हूं।

यह मेरे द्वारा बनाया गया मिश्रण है।

@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}

इस तरह से मैं मिश्रण को शामिल करना चाहता हूं:

@include placeholder(font-style:italic; color: white; font-weight:100;);

जाहिर है कि यह उन सभी कॉलोनों और अर्ध-कॉलोनों की वजह से काम नहीं कर रहा है जो कि मिक्सिन से होकर गुजर रहे हैं, लेकिन ... मैं वास्तव में सिर्फ स्थैतिक सीएसएस इनपुट करना चाहूंगा और इसे उपरोक्त फ़ंक्शन की तरह ही पास करूंगा।

क्या यह संभव है?

Answer 1

आप @contentनिर्देशन की तलाश कर रहे हैं :

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}

SASS संदर्भ में अधिक जानकारी है, जो यहां पाई जा सकती है: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

---

Sass 3.4 के रूप में, इस मिक्सिन को लिखा जा सकता है ताकि नेस्टेड और अनावश्यक दोनों तरह से काम किया जा सके:

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

उपयोग:

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

आउटपुट:

.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

Comments

बिल्कुल सही, जो मुझे चाहिए था।

— शैनन होकिन्स

निश्चित नहीं है कि यह वापस क्यों किया गया, लेकिन उत्तर गलत है। आपको प्रत्येक व्यक्तिगत विक्रेता उपसर्ग की शुरुआत में '@' की आवश्यकता है। डेव हेन द्वारा आगे एक उत्तर पर एक नज़र डालें, या बेहतर अभी तक - इस कोड को चलाने की कोशिश करें, और आप इसे काम नहीं देखेंगे।

— Sk446

@ रिकम यह इसलिए वापस किया गया क्योंकि आपके द्वारा किए गए संशोधनों में कोई त्रुटि नहीं है (त्रुटि: आधार-स्तर के नियमों में मूल-चयनकर्ता-संदर्भित चरित्र '&') नहीं हो सकता है। यह ठीक उसी आउटपुट को बनाता है जिसे ओपी खोज रहा है, आपके द्वारा दावा किया गया उत्तर "सही" नहीं है।

— साइमन

दिलचस्प ... क्या आप cli के माध्यम से संकलन कर रहे हैं? ऐसा लगता है कि एक विपरीत संघर्ष होना चाहिए क्योंकि मेरे लिए सटीक विपरीत होता है, और अन्य उत्तरों को देखते हुए, कुछ अन्य भी।

— Sk446

हाँ, सीएलआई: कम्पास के माध्यम से 3.3.0.rc.3 सैस। CodePen और Sassmeister के साथ डबल चेक किया गया । &आवश्यक है अगर आप की तरह एक चयनकर्ता प्राप्त करने में सक्षम होना चाहता हूँ input::-webkit-input-placeholdermixin साथ, लेकिन यह रूट स्तर पर यह उपयोग करने से रोक देगा। sassmeister.com/gist/9469073 । अब अगर आप लिबास का उपयोग कर रहे हैं, तो यह एक अलग कहानी है।

— 16

Answer 2

मुझे साइमनमैन और कर्ट म्यूलर द्वारा दिए गए दृष्टिकोण के बारे में पता चला , लेकिन मुझे एक माता-पिता के संदर्भ की आवश्यकता थी (यानी, मुझे प्रत्येक विक्रेता उपसर्ग में 'और' उपसर्ग जोड़ने की आवश्यकता है); इस तरह:

@mixin placeholder {
    &::-webkit-input-placeholder {@content}
    &:-moz-placeholder           {@content}
    &::-moz-placeholder          {@content}
    &:-ms-input-placeholder      {@content}  
}

मैं इस तरह से मिश्रण का उपयोग करता हूं:

input {
    @include placeholder {
        font-family: $base-font-family;
        color: red;
    }
}

जगह में मूल संदर्भ के साथ, फिर सही सीएसएस उत्पन्न होता है, जैसे:

input::-webkit-input-placeholder {
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
    color: red;
}

माता-पिता के संदर्भ (&) के बिना, फिर एक स्थान विक्रेता उपसर्ग से पहले डाला जाता है और सीएसएस प्रोसेसर घोषणा को अनदेखा करता है; यह इस तरह दिखता है:

input::-webkit-input-placeholder {
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
    color: red;
}

Comments

आपका बहुत बहुत धन्यवाद। स्वीकार किए गए उत्तर / समाधान कार्य करने के लिए आपने मुझे परीक्षण और त्रुटि के घंटे बचाए ...

— tmuecksch

यह ध्यान देने योग्य है कि आपके चयनकर्ता अब थोड़े अयोग्य हो गए हैं (जब तक कि आप वास्तव में इसे इनपुट या चुनिंदा तत्वों पर काम नहीं करना चाहते हैं)। मूल चयनकर्ता को जोड़ने से आपको बिना घोंसले के मिश्रण का उपयोग करने से रोकता है (जो कि ओपी देख रहा था)।

— साइमन मैन

&पूरी तरह से आवश्यक है। इसे दर्शाने के लिए लोकप्रिय उत्तर का संपादन किया।

— एलेक्सकेम्पटन

+1। कुछ ब्राउज़र ::placeholderअब आधिकारिक संपत्ति का समर्थन करते हैं, इसलिए मैं इसे शीर्ष पर जोड़ने की सलाह &::placeholder {@content}

— मैट ब्राउन 6

Answer 3

यह आशुलिपि वाक्यविन्यास के लिए है

=placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

इसका उपयोग करें

input
  +placeholder
    color: red

Comments

मुझे ईमानदारी से लगता है कि यह पढ़ने में कठिन है और नियमित रूप से वाक्यविन्यास के रूप में भी साफ नहीं है

— शैनन होच्किन्स

मैंने इसे एक टिप्पणी के रूप में रखने की कोशिश की, लेकिन बहुत बड़ी है। मैं इस वाक्यविन्यास का उपयोग करता हूं, और चुने हुए उत्तर का काम भी आसानी से नहीं कर सकता। मुझे लगा कि यह किसी और के लिए उपयोगी हो सकता है।

— igrossiter

यह एक सबसे अच्छा, समझने और लागू करने में आसान है।

— मेष राशि

Answer 4

ऐसा कुछ क्यों नहीं?

यह सूचियों, पुनरावृत्ति और प्रक्षेप के संयोजन का उपयोग करता है।

@mixin placeholder ($rules) {

  @each $rule in $rules {
    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
      #{nth($rule, 1)}: #{nth($rule, 2)};
    }  
  }
}

$rules: (('border', '1px solid red'),
         ('color', 'green'));

@include placeholder( $rules );

Comments

यह थोड़ा जटिल है, मैं सामग्री के निर्देशन के लिए देख रहा था लेकिन थैंक्यू!

— शैनन होकिन्स

Answer 5

'अनक्लोज्ड ब्लॉक: CssSyntaxError' से बचने के लिए sass कंपाइलर से फेंकी जा रही त्रुटियां 'a' जोड़ देती हैं; @ कॉन्टेंट के अंत तक।

@mixin placeholder {
   ::-webkit-input-placeholder { @content;}
   :-moz-placeholder           { @content;}
   ::-moz-placeholder          { @content;}
   :-ms-input-placeholder      { @content;}
}

Answer 6

मैं बिल्कुल उसी तरह का उपयोग करता हूं जैसे कि मिश्रण ने प्लेसहोल्डर को नहीं लिखा था। मैं इसे यहाँ sass मिश्रण संग्रह में ढूँढता हूँ और मैं इससे बहुत संतुष्ट हूँ। इसमें एक टेक्स्ट है जो मिक्सिन्स ऑप्शन के बारे में अधिक बताता है।