Заполнитель Mixin SCSS / CSS

Question

Заполнитель Mixin SCSS / CSS

Я пытаюсь создать микширование для заполнителей в sass.

Это миксин, который я создал.

@mixin placeholder ($css) {

  ::-webkit-input-placeholder {$css}

  :-moz-placeholder           {$css}

  ::-moz-placeholder          {$css}

  :-ms-input-placeholder      {$css}  

}

вот как я хотел бы включить mixin:

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

это возможно?

611 6

css sass

6 ответов:

Comments

Ничего не найдено.

cimmanon · Accepted Answer · 2014-10-24 18:24:46

Вы ищите

211

2014-10-24 18:24:46

Dave Hein · Accepted Answer · 2017-05-23 15:10:33

Я нашел подход к cimmanon и Курт Мюллер почти работал, но мне нужна была родительская ссылка (т. е. мне нужно добавить префикс ' & ' к каждому префиксу поставщика); вот так:
@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;
}}
С родительской ссылкой на месте, то правильный 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; }

igrossiter · Accepted Answer · 2015-02-23 20:21:15

Это сокращенный синтаксис

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

использовать его как

input
  +placeholder
    color: red

Kurt Mueller · Accepted Answer · 2013-06-19 05:28:07

почему не что-то вроде этого?

Он использует комбинацию списков, итерация и интерполяции.
@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 );

NoDirection · Accepted Answer · 2017-06-09 13:35:25

чтобы избежать ошибок "Unclosed block: CssSyntaxError", которые выбрасываются из компиляторов sass, добавьте"; " в конец @content.
@mixin placeholder {
   ::-webkit-input-placeholder { @content;}
   :-moz-placeholder           { @content;}
   ::-moz-placeholder          { @content;}
   :-ms-input-placeholder      { @content;}
}

Nesha Zoric · Accepted Answer · 2018-03-23 16:40:05

Я использую точно такой же заполнитель Sass mixin, как и nodirection. Я нахожу его в коллекции Sass mixins здесь и я очень доволен. Есть текст это объясняет вариант mixins больше.