Trình giữ chỗ Mixin SCSS / CSS

Tôi đang cố gắng tạo một mixin cho các trình giữ chỗ trong sass.

Đây là mixin mà tôi đã tạo.

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

Đây là cách tôi muốn đưa vào mixin:

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

Rõ ràng là điều này sẽ không hoạt động vì tất cả các dấu hai chấm và dấu chấm phẩy được chuyển qua mixin, nhưng ... tôi thực sự muốn chỉ nhập css tĩnh và chuyển nó qua chính xác như hàm trên.

Điều này có khả thi không?

Bạn đang tìm kiếm @contentchỉ thị:

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

Tham chiếu SASS có thêm thông tin, có thể tìm thấy tại đây: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Kể từ Sass 3.4, mixin này có thể được viết như vậy để hoạt động cả lồng nhau và không được giải mã:

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

Sử dụng:

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

@include placeholder {
  color: red;
}

Đầu ra:

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

Tôi nhận thấy cách tiếp cận do cimmanon và Kurt Mueller đưa ra gần như hiệu quả, nhưng tôi cần tham chiếu gốc (tức là tôi cần thêm tiền tố '&' vào tiền tố của mỗi nhà cung cấp); như thế này:

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

Tôi sử dụng mixin như thế này:

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

Với tham chiếu gốc tại chỗ, sau đó css đúng sẽ được tạo, ví dụ:

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

Nếu không có tham chiếu gốc (&), thì một khoảng trắng được chèn vào trước tiền tố của nhà cung cấp và bộ xử lý CSS bỏ qua khai báo; trông như thế này:

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

Đây là cú pháp viết tắt

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

sử dụng nó như

input
  +placeholder
    color: red

Tại sao không phải là một cái gì đó như thế này?

Nó sử dụng sự kết hợp của danh sách, phép lặp và phép nội suy.

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

Để tránh lỗi 'Khối chưa được đóng: CssSyntaxError' được ném từ trình biên dịch sass, hãy thêm dấu ';' vào cuối @content.

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

Tôi sử dụng chính xác trình giữ chỗ sass mixin giống như NoDirection đã viết. Tôi tìm thấy nó trong bộ sưu tập mixins sass ở đây và tôi rất hài lòng với nó. Có một văn bản giải thích thêm về tùy chọn mixins.