ตัวยึด Mixin SCSS / CSS

ฉันกำลังพยายามสร้าง mixin สำหรับตัวยึดตำแหน่งใน sass

นี่คือมิกซ์อินที่ฉันสร้างขึ้น

@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;);

เห็นได้ชัดว่าสิ่งนี้จะไม่ได้ผลเพราะเครื่องหมายทวิภาคและเซมิโคลอนทั้งหมดที่ส่งผ่านไปยังมิกซ์อิน แต่ ... ฉันต้องการแค่ใส่ static css แล้วส่งผ่านเหมือนกับฟังก์ชันข้างต้น

เป็นไปได้หรือไม่

คุณกำลังมองหา@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 Reference มีข้อมูลเพิ่มเติมซึ่งสามารถดูได้ที่นี่: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

ใน Sass 3.4 คุณสามารถเขียน mixin นี้ได้เพื่อให้ทำงานได้ทั้งแบบซ้อนและไม่ทดสอบ:

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

ฉันพบว่าแนวทางที่กำหนดโดยcimmanonและKurt Muellerเกือบจะได้ผล แต่ฉันต้องการข้อมูลอ้างอิงของผู้ปกครอง (เช่นฉันต้องเพิ่มคำนำหน้า '&' ให้กับคำนำหน้าผู้ขายแต่ละราย) แบบนี้:

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

ฉันใช้ mixin แบบนี้:

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

เมื่อมีการอ้างอิงพาเรนต์แล้ว css ที่ถูกต้องจะถูกสร้างขึ้นเช่น:

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

หากไม่มีการอ้างอิงระดับบนสุด (&) ช่องว่างจะถูกแทรกก่อนคำนำหน้าผู้ขายและตัวประมวลผล CSS จะละเว้นการประกาศ ที่มีลักษณะดังนี้:

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

นี่คือไวยากรณ์ชวเลข

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

ใช้มันเช่น

input
  +placeholder
    color: red

ทำไมไม่เป็นแบบนี้?

ใช้การรวมกันของรายการการวนซ้ำและการแก้ไข

@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 );

เพื่อหลีกเลี่ยงข้อผิดพลาด 'Unclosed block: CssSyntaxError' ที่ถูกส่งจากคอมไพเลอร์ sass ให้เพิ่ม ';' ไปยังจุดสิ้นสุดของ @content

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

ฉันใช้ตัวยึด sass mixin เดียวกันกับที่ NoDirection เขียน ฉันพบมันในคอลเลกชัน sass mixins ที่นี่และฉันพอใจกับมันมาก มีข้อความที่อธิบายตัวเลือกมิกซ์อินเพิ่มเติม