স্থানধারক মিক্সিন এসসিএসএস / সিএসএস

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

@ রিকম এটিকে ফিরে দেওয়া হয়েছিল কারণ আপনি যে পরিবর্তনগুলি করেছেন তা সংকলন করে না (ত্রুটি: বেস-স্তরের নিয়মে প্যারেন্ট-সিলেক্টর-রেফারেন্সিং অক্ষর '&' থাকতে পারে না।) এটি ওপি ঠিক যে আউটপুটটির সন্ধান করছে তা তৈরি করে, আপনার দাবির উত্তর "সঠিক" নয়।

— cimmanon

আকর্ষণীয় ... আপনি ক্লাইটের মাধ্যমে সংকলন করছেন? দেখে মনে হচ্ছে ঠিক একটি বিপরীত বিরোধ থাকতেই হবে কারণ আমার জন্য ঠিক উল্টো ঘটনা ঘটেছে এবং অন্যান্য জবাব, অন্য কয়েকজনকেও বিচার করে।

— Sk446

হ্যাঁ, সিএলআই: কমাসের মাধ্যমে স্যাস 3.3.0.rc.3। কোডপেন এবং সাসমিস্টারের সাথে ডাবল চেক করা হয়েছে । &প্রয়োজনীয় হলে তোমার মত নির্বাচক পেতে সক্ষম হতে চান input::-webkit-input-placeholdermixin সঙ্গে, কিন্তু এটা রুট স্তরে এটি ব্যবহার করতে প্রতিরোধ করা হবে। sassmeister.com/gist/9469073 । এখন আপনি যদি লিবাসাস ব্যবহার করছেন তবে এটি ভিন্ন গল্প।

— cimmanon

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;
}

পিতামাতুল্য রেফারেন্স (&) ব্যতীত, তারপরে বিক্রেতা উপসর্গের আগে একটি স্পেস sertedোকানো হবে এবং সিএসএস প্রসেসর ঘোষণাকে উপেক্ষা করবে; এটি দেখতে এরকম দেখাচ্ছে:

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

Comments

আপনাকে অনেক ধন্যবাদ. গৃহীত উত্তর / সমাধানের কাজটি করার জন্য আপনি আমাকে কয়েক ঘন্টা বিচার এবং ত্রুটি বাঁচিয়েছেন ...

— tmuecksch

এটি লক্ষণীয় যে আপনার নির্বাচকরা এখন কিছুটা বাজেয়াপ্ত হয়েছেন (যদি না আপনি প্রকৃতপক্ষে এটি ইনপুটটিতে কাজ করতে চান বা উপাদান নির্বাচন না করেন)। অভিভাবক নির্বাচককে যুক্ত করা আপনাকে বাসা ছাড়াই মিক্সিন ব্যবহার করা থেকে বিরত রাখে (যা ওপি খুঁজছিল।

— cimmanon

&সম্পূর্ণই প্রয়োজন। এটি প্রতিফলিত করার জন্য জনপ্রিয় উত্তর সম্পাদনা করেছেন।

— অ্যালেক্সকেম্পটন

+1 টি। কিছু ব্রাউজার ::placeholderএখন সরকারী সম্পত্তি সমর্থন করে , তাই আমি শীর্ষে এটি যোগ করার পরামর্শ দিচ্ছি:&::placeholder {@content}

— ম্যাট ব্রাউন

Answer 3

এটি শর্টহ্যান্ড সিনট্যাক্সের জন্য

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

এটি পছন্দ করুন

input
  +placeholder
    color: red

Comments

আমি সত্যই বলেছি এটি পড়া শক্ত এবং নিয়মিত বাক্য

— গঠনের মতো ঝরঝরেও নয়

আমি এটিকে মন্তব্য হিসাবে রাখার চেষ্টা করেছি, তবে এটি অনেক বড়। আমি বরং এই বাক্য গঠনটি ব্যবহার করি এবং নির্বাচিত উত্তর খুব সহজে কাজ করতে পারি না। আমি ভেবেছিলাম এটি অন্য কারও পক্ষে কার্যকর হতে পারে।

— ইগ্রোসিটার

এটি সেরা, বোঝা ও বাস্তবায়নের পক্ষে সহজ।

— আর্স্লিওন

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

'আনস্লোসড ব্লক এড়াতে: সিএসএস সায়েন্টেক্স এরির' এস এস সংকলকগুলি থেকে ত্রুটিগুলি নিক্ষেপ করা একটি ';' @ কনটেন্টের শেষে।

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

Answer 6

আমি নোডাইরেশন যেমন লিখেছিল ঠিক তেমন সাস মিক্সিন প্লেসোল্ডার ব্যবহার করি। আমি এখানে সাস মিক্সিন সংগ্রহের মধ্যে এটি পেয়েছি এবং আমি এতে সন্তুষ্ট। এখানে একটি পাঠ্য রয়েছে যা মিক্সিন বিকল্পকে আরও ব্যাখ্যা করে।